diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 598e2cbd..cfa22e0f 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -77,6 +77,30 @@ export default defineConfig({
       'link',
       { rel: 'alternate', type: 'application/rss+xml', href: '/blog.rss' },
     ],
+    ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
+    [
+      'link',
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: 'true',
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'preload',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600&family=IBM+Plex+Mono:wght@400&display=swap',
+        as: 'style',
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600&family=IBM+Plex+Mono:wght@400&display=swap',
+      },
+    ],
     ['link', { rel: 'me', href: 'https://m.webtoo.ls/@vite' }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:title', content: ogTitle }],
@@ -146,7 +170,8 @@ export default defineConfig({
 
     footer: {
       message: `Released under the MIT License. (${commitRef})`,
-      copyright: 'Copyright © 2019-present Evan You & Vite Contributors',
+      copyright:
+        'Copyright © 2019-present Yuxi (Evan) You & Vite Contributors',
     },
 
     nav: [
diff --git a/.vitepress/theme/components/AsideSponsors.vue b/.vitepress/theme/components/AsideSponsors.vue
index c23c8ee2..a63361f4 100644
--- a/.vitepress/theme/components/AsideSponsors.vue
+++ b/.vitepress/theme/components/AsideSponsors.vue
@@ -23,7 +23,7 @@ const sponsors = computed(() => {
       href="https://viteconf.org/?utm=vite-sidebar"
       target="_blank"
   >
-    <img width="22" height="22" src="/viteconf.svg" />
+    <img width="22" height="22" src="/viteconf.svg" alt="ViteConf Logo" />
     <span>
       <p class="extra-info">Building Together</p>
       <p class="heading">ViteConf 24 - Oct 3</p>
diff --git a/.vitepress/theme/components/BlogIndex.vue b/.vitepress/theme/components/BlogIndex.vue
index cddd7c16..5f77ee19 100644
--- a/.vitepress/theme/components/BlogIndex.vue
+++ b/.vitepress/theme/components/BlogIndex.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { data as posts } from './blog.data'
+import { data as posts } from '../../../_data/blog.data'
 
 function getDateTime(time: number) {
   return new Date(time).toISOString()
diff --git a/.vitepress/theme/components/HomeSponsors.vue b/.vitepress/theme/components/HomeSponsors.vue
deleted file mode 100644
index 0523eb1a..00000000
--- a/.vitepress/theme/components/HomeSponsors.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { VPHomeSponsors } from 'vitepress/theme'
-import { useSponsor } from '../composables/sponsor'
-const { data } = useSponsor()
-</script>
-
-<template>
-  <VPHomeSponsors
-    v-if="data"
-    message="Vite is free and open source, made possible by wonderful sponsors."
-    :data="data"
-  />
-  <div class="action">
-    <a
-      class="sponsor"
-      href="https://github.com/sponsors/vitejs"
-      target="_blank"
-      rel="noreferrer"
-    >
-      Sponsor Vite
-    </a>
-    <a
-      class="sponsor"
-      href="https://github.com/sponsors/yyx990803"
-      target="_blank"
-      rel="noreferrer"
-    >
-      Sponsor Evan You
-    </a>
-  </div>
-</template>
-
-<style scoped>
-.action {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  padding-top: 4rem;
-}
-
-.sponsor {
-  /* .VPButton */
-  display: inline-block;
-  border: 1px solid transparent;
-  text-align: center;
-  font-weight: 600;
-  white-space: nowrap;
-  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
-  /* .VPButton.medium */
-  border-radius: 20px;
-  padding: 0 20px;
-  line-height: 38px;
-  font-size: 14px;
-  /* .VPButton.sponsor */
-  border-color: var(--vp-button-sponsor-border);
-  color: var(--vp-button-sponsor-text);
-  background-color: var(--vp-button-sponsor-bg);
-}
-
-.sponsor:hover {
-  /* .VPButton.sponsor:hover */
-  border-color: var(--vp-button-sponsor-hover-border);
-  color: var(--vp-button-sponsor-hover-text);
-  background-color: var(--vp-button-sponsor-hover-bg);
-}
-</style>
diff --git a/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue b/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue
new file mode 100644
index 00000000..10bd32fa
--- /dev/null
+++ b/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue	
@@ -0,0 +1,821 @@
+<script setup lang="ts">
+import { gsap } from 'gsap'
+import { MotionPathPlugin } from 'gsap/dist/MotionPathPlugin'
+import { onMounted, onUnmounted, Ref, ref } from 'vue'
+import SvgInputs from './svg-elements/SvgInputs.vue'
+import SvgOutputs from './svg-elements/SvgOutputs.vue'
+import SvgBlueIndicator from './svg-elements/SvgBlueIndicator.vue'
+import SvgPinkIndicator from './svg-elements/SvgPinkIndicator.vue'
+import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
+import { SvgNodeProps } from '../common/SvgNode.vue'
+
+gsap.registerPlugin(MotionPathPlugin)
+
+// Define the paths on the input side of the diagram
+const inputPaths = [
+  'M843.505 284.659L752.638 284.659C718.596 284.659 684.866 280.049 653.251 271.077L598.822 255.629L0.675021 1.00011',
+  'M843.505 298.181L724.342 297.36C708.881 297.36 693.45 296.409 678.22 294.518L598.822 284.659C592.82 284.659 200.538 190.002 0.675028 164.892',
+  'M843.505 311.703L701.108 310.061L598.822 305.136L0.675049 256.071',
+  'M843.505 325.224L598.822 326.002L0.675049 321.858',
+  'M843.505 338.746L701.108 340.388L598.822 345.442L0.675038 387.646',
+  'M843.505 352.268L724.342 353.088C708.881 353.088 693.45 354.039 678.22 355.93L598.822 365.789L0.675067 478.825',
+  'M843.505 365.789L752.638 365.789C718.596 365.789 684.866 370.399 653.251 379.372L598.822 394.82L0.675049 642.717',
+]
+
+// Setup objects representing each input line's animation state
+const inputLines: Ref<SvgNodeProps>[] = inputPaths.map((path) =>
+  ref({
+    position: 0,
+    visible: false,
+    labelVisible: false,
+    label: '',
+    dotColor: null,
+    glowColor: null,
+    path,
+  }),
+)
+
+// Define the file set "combinations" that can be shown on the input side
+const inputFileSets = ref([
+  [
+    { label: '.jsx' },
+    { label: '.sass' },
+    { label: '.svelte', color: '#ff8d67' },
+  ],
+  [{ label: '.tsx' }, { label: '.scss' }, { label: '.vue', color: '#40b782' }],
+  [
+    { label: '.js' },
+    { label: '.styl' },
+    { label: '.svelte', color: '#ff8d67' },
+  ],
+  [{ label: '.ts' }, { label: '.less' }, { label: '.vue', color: '#40b782' }],
+  [{ label: '.mts' }, { label: '.html' }, { label: '.json' }],
+])
+
+// Setup objects representing each output line's animation state
+const outputLines: Ref[] = [
+  ref({
+    position: 0,
+    visible: false,
+    labelVisible: false,
+    label: '.html',
+  }),
+  ref({
+    position: 0,
+    visible: false,
+    labelVisible: false,
+    label: '.css',
+  }),
+  ref({
+    position: 0,
+    visible: false,
+    labelVisible: false,
+    label: '.js',
+  }),
+]
+
+// Add some flags for whether to display various subcomponents
+const blueIndicator = ref(false)
+const pinkIndicator = ref(false)
+const illuminateLogo = ref(false)
+
+// Set up a reference to our ScrollTrigger instance and timeline
+let scrollTriggerInstance: ScrollTrigger | null
+let timeline: gsap.core.Timeline | null
+
+// Start all animations when mounted
+onMounted(() => {
+  scrollTriggerInstance = ScrollTrigger.create({
+    trigger: '#hero-diagram',
+    start: 'center 100%',
+    once: true,
+    onEnter: () => {
+      animateDiagram()
+    },
+  })
+})
+
+// Clean up the scroll trigger and timeline when unmounted
+onUnmounted(() => {
+  scrollTriggerInstance?.kill()
+  timeline?.kill()
+})
+
+/**
+ * The core animation for the hero diagram.
+ * Has both a desktop and mobile variation.
+ */
+const animateDiagram = () => {
+  // Determine if we're showing the desktop or mobile variation of the animation
+  // This is determined on each "loop" of the animation
+  const isMobile = window.innerWidth < 768
+
+  // Prepare a timeline
+  timeline = gsap.timeline({
+    onComplete: animateDiagram,
+  })
+
+  // Animate the input nodes/lines
+  prepareInputs().forEach((lineIndex, fileIndex) => {
+    timeline.add(
+      isMobile
+        ? animateSingleInputMobile(inputLines[lineIndex as number])
+        : animateSingleInputDesktop(inputLines[lineIndex as number]),
+      fileIndex * (isMobile ? 0.4 : 0.2),
+    )
+  })
+
+  // Illuminate the logo and colored indicators
+  timeline.set(blueIndicator, { value: true }, isMobile ? '>-2' : '>-0.2')
+  timeline.set(illuminateLogo, { value: true }, '<-0.3')
+  timeline.set(pinkIndicator, { value: true }, '<+0.3')
+
+  // Animate the output nodes/lines
+  timeline.addLabel('showOutput', '<')
+  outputLines.forEach((outputLine, index) => {
+    timeline.add(
+      isMobile
+        ? animateSingleOutputMobile(outputLine)
+        : animateSingleOutputDesktop(outputLine, index),
+      'showOutput+=' + (isMobile ? 0.3 : 0.1) * index,
+    )
+  })
+
+  //  Desktop only reset
+  if (!isMobile) {
+    // Disable the colored indicators
+    timeline.set(blueIndicator, { value: false }, '>-1')
+    timeline.set(pinkIndicator, { value: false }, '<')
+
+    // Pause briefly at the end of the animation
+    timeline.set({}, {}, '+=0.2')
+  }
+}
+
+/**
+ * Randomly selects a set of input file nodes and assigns them to input lines.
+ */
+const prepareInputs = () => {
+  // Randomly select a set of input file "nodes"
+  const inputFileSet =
+    inputFileSets.value[Math.floor(Math.random() * inputFileSets.value.length)]
+
+  // Choose enough unique lines for the input file nodes to slide along
+  const inputLineIndexes = new Set()
+  while (inputLineIndexes.size < 3) {
+    const index: number = Math.floor(Math.random() * inputLines.length)
+    inputLineIndexes.add(index)
+  }
+
+  // Assign each line it's appropriate node label
+  const inputs = [...inputLineIndexes]
+  inputs.forEach((lineIndex, fileIndex) => {
+    inputLines[lineIndex as number].value.label = inputFileSet[fileIndex].label
+    inputLines[lineIndex as number].value.dotColor = inputLines[
+      lineIndex as number
+    ].value.glowColor = inputFileSet[fileIndex].color as string | null
+  })
+  return inputs
+}
+
+/**
+ * Animates a single output line for desktop.
+ * There are technically 3 output lines, but they are stacked on top of each other.x
+ */
+const animateSingleOutputDesktop = (
+  outputLine: Ref<SvgNodeProps>,
+  index: number,
+) => {
+  const timeline = gsap.timeline()
+
+  // Reset the line
+  timeline.set(
+    outputLine.value,
+    {
+      position: 0,
+    },
+    0,
+  )
+
+  // Animate the dot in
+  timeline.to(
+    outputLine.value,
+    {
+      position: (0.7 / 3) * (index + 1) + 0.05,
+      duration: 1.5,
+      ease: 'expo.out',
+    },
+    0,
+  )
+
+  // Show the dot
+  timeline.set(
+    outputLine.value,
+    {
+      visible: true,
+    },
+    0,
+  )
+
+  // Show the label
+  timeline.set(
+    outputLine.value,
+    {
+      labelVisible: true,
+    },
+    0.4,
+  )
+
+  // Animate the dot out
+  timeline.to(
+    outputLine.value,
+    {
+      position: 1,
+      duration: 1.5,
+      ease: 'power3.in',
+    },
+    2,
+  )
+
+  // Hide the label
+  timeline.set(
+    outputLine.value,
+    {
+      labelVisible: false,
+    },
+    2.5,
+  )
+
+  // Hide the dot
+  timeline.set(
+    outputLine.value,
+    {
+      visible: false,
+    },
+    3,
+  )
+
+  return timeline
+}
+
+/**
+ * Animates a single output line for mobile.
+ * There are technically 3 output lines, but they are stacked on top of each other.
+ */
+const animateSingleOutputMobile = (outputLine: Ref<SvgNodeProps>) => {
+  const timeline = gsap.timeline()
+
+  // Reset the line
+  timeline.set(
+    outputLine.value,
+    {
+      position: 0,
+    },
+    0,
+  )
+
+  // Animate the dot in
+  timeline.to(
+    outputLine.value,
+    {
+      position: 0.7,
+      duration: 2,
+      ease: 'power1.inOut',
+    },
+    0.3,
+  )
+
+  // Show the dot
+  timeline.set(
+    outputLine.value,
+    {
+      visible: true,
+    },
+    0.75,
+  )
+
+  // Hide the dot
+  timeline.set(
+    outputLine.value,
+    {
+      visible: false,
+    },
+    1.2,
+  )
+
+  return timeline
+}
+
+/**
+ * Animates a single input line for desktop.
+ */
+const animateSingleInputDesktop = (inputLine: Ref<SvgNodeProps>) => {
+  const timeline = gsap.timeline()
+
+  // Reset the line
+  timeline.set(
+    inputLine.value,
+    {
+      position: 0,
+    },
+    0,
+  )
+
+  // Animate the dot in
+  timeline.to(
+    inputLine.value,
+    {
+      position: Math.random() * 0.1 + 0.4,
+      duration: 1,
+      ease: 'expo.out',
+    },
+    0,
+  )
+
+  // Show the dot
+  timeline.set(
+    inputLine.value,
+    {
+      visible: true,
+    },
+    0,
+  )
+
+  // Show the label
+  timeline.set(
+    inputLine.value,
+    {
+      labelVisible: true,
+    },
+    0.2,
+  )
+
+  // Animate the dot out
+  timeline.to(
+    inputLine.value,
+    {
+      position: 1,
+      duration: 1.2,
+      ease: 'power3.in',
+    },
+    1.2,
+  )
+
+  // Hide the label
+  timeline.set(
+    inputLine.value,
+    {
+      labelVisible: false,
+    },
+    1.6,
+  )
+
+  // Hide the dot
+  timeline.set(
+    inputLine.value,
+    {
+      visible: false,
+    },
+    1.9,
+  )
+
+  // Return the timeline
+  return timeline
+}
+
+/**
+ * Animates a single input line for mobile.
+ */
+const animateSingleInputMobile = (inputLine: Ref<SvgNodeProps>) => {
+  const timeline = gsap.timeline()
+
+  // Reset the line
+  timeline.set(
+    inputLine.value,
+    {
+      position: 0,
+    },
+    0,
+  )
+
+  // Animate the dot in
+  timeline.to(
+    inputLine.value,
+    {
+      position: 1,
+      duration: 1.8,
+      ease: 'power2.out',
+    },
+    0,
+  )
+
+  // Show the dot
+  timeline.set(
+    inputLine.value,
+    {
+      visible: true,
+    },
+    0,
+  )
+
+  // Hide the dot
+  timeline.set(
+    inputLine.value,
+    {
+      visible: false,
+    },
+    0.5,
+  )
+
+  // Return the timeline
+  return timeline
+}
+
+// Animating borders only smoothly transitions in Chromium-based browsers
+// We don't need extensive checking, just see if the `chrome` key exists on the window object
+const isChromiumBrowser = ref(false)
+onMounted(() => {
+  isChromiumBrowser.value = 'chrome' in window
+})
+</script>
+
+<template>
+  <div class="hero__diagram" id="hero-diagram">
+    <!-- Input Lines -->
+    <SvgInputs :input-lines="inputLines" />
+
+    <!-- Output Line -->
+    <SvgOutputs :output-lines="outputLines" />
+
+    <!-- Blue Indicator -->
+    <SvgBlueIndicator :active="blueIndicator" />
+
+    <!-- Pink Indicator -->
+    <SvgPinkIndicator :active="pinkIndicator" />
+
+    <!-- Vite Chip -->
+    <div class="vite-chip" :class="{ active: illuminateLogo }">
+      <div class="vite-chip__background">
+        <div class="vite-chip__border" />
+        <div
+          class="vite-chip__edge"
+          :class="{ 'edge--animated': isChromiumBrowser }"
+        ></div>
+      </div>
+      <div class="vite-chip__filter" />
+      <img src="/logo.svg" alt="Vite Logo" class="vite-chip__logo" />
+    </div>
+  </div>
+
+  <!-- Background -->
+  <div class="hero__background" :class="{ active: illuminateLogo }" />
+</template>
+
+<style scoped>
+.hero__diagram {
+  pointer-events: none;
+  position: relative;
+  width: 1630px;
+  overflow: hidden;
+  margin: -100px auto 0;
+
+  @media (max-width: 1630px) {
+    left: 50%;
+    transform: translate3d(-50%, 0, 0);
+  }
+
+  @media (max-width: 768px) {
+    left: 50%;
+    transform: translate3d(-50%, 0, 0) scale(0.9);
+  }
+}
+
+.vite-chip {
+  width: 134px;
+  height: 134px;
+  position: absolute;
+  left: 750px;
+  top: 260px;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: all 0.6s ease-out;
+  transform: translate3d(0, 0, 0) scale(0.85);
+
+  .vite-chip__filter {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: translate3d(0, 0, 0) scale(1);
+    transition: transform 0.3s ease-in-out;
+    background: linear-gradient(
+        130deg,
+        rgba(61, 61, 61, 0.3) 0%,
+        rgba(61, 61, 61, 0) 40%
+      ),
+      linear-gradient(
+        130deg,
+        rgba(42, 33, 63, 0) 60%,
+        rgba(61, 61, 61, 0.3) 100%
+      ),
+      linear-gradient(to bottom, rgba(16, 14, 26, 0.3) 60%, rgba(12, 12, 12, 0));
+    border-radius: 10px;
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 5;
+      background: linear-gradient(
+        130deg,
+        rgba(61, 61, 61, 0) 45%,
+        rgba(154, 152, 222, 0.3) 50%,
+        rgba(61, 61, 61, 0) 60%
+      );
+      background-size: 500%;
+      background-position-x: 100%;
+      filter: blur(8px);
+      border-radius: 100px;
+      mix-blend-mode: color-dodge;
+      display: none;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 5;
+      background: linear-gradient(
+        -130deg,
+        rgba(42, 33, 63, 0) 40%,
+        rgba(154, 152, 222, 0.2) 50%,
+        rgba(42, 33, 63, 0) 60%
+      );
+      background-size: 400%;
+      background-position-x: 100%;
+      filter: blur(10px);
+      border-radius: 100px;
+      mix-blend-mode: color-dodge;
+      display: none;
+    }
+
+    @media (min-width: 768px) {
+      &:before,
+      &:after {
+        display: block;
+      }
+    }
+  }
+
+  .vite-chip__edge {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid;
+    border-image-slice: 1;
+    border-image-source: linear-gradient(
+      to bottom right,
+      rgba(0, 0, 0, 0) 60%,
+      rgba(255, 255, 255, 0.15) 65%,
+      rgba(0, 0, 0, 0) 90%
+    );
+    opacity: 0;
+    will-change: opacity, border;
+    transition: all 1s ease-in-out;
+
+    @media (min-width: 768px) {
+      border-image-source: linear-gradient(
+        to bottom right,
+        rgba(0, 0, 0, 0) 50%,
+        rgba(255, 255, 255, 0.15) 60%,
+        rgba(0, 0, 0, 0) 90%
+      );
+    }
+  }
+
+  .vite-chip__border {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    border-radius: 10px;
+    border: 0 solid rgba(89, 82, 108, 0.3);
+    opacity: 0.8;
+    background: rgba(40, 40, 40, 0.3);
+
+    @media (min-width: 768px) {
+      top: 2px;
+      right: 2px;
+      left: 2px;
+      bottom: 2px;
+    }
+  }
+
+  .vite-chip__logo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+    width: 65px;
+    opacity: 0.2;
+    filter: grayscale(100%);
+    transition: all 0.2s ease;
+    z-index: 3;
+  }
+
+  &.active {
+    box-shadow: 0 30px 35px -10px rgba(0, 0, 0, 0.6);
+    transform: translate3d(0, 0, 0) scale(1);
+
+    .vite-chip__edge {
+      opacity: 1;
+
+      &.edge--animated {
+        @media (min-width: 768px) {
+          animation: rotateGradient 8s linear infinite;
+        }
+      }
+    }
+
+    .vite-chip__filter {
+      transform: translate3d(0, 0, 0) scale(0.97);
+
+      &:before {
+        animation: shimmer 8s infinite linear;
+      }
+
+      &:after {
+        animation: shimmer 6s infinite linear;
+      }
+    }
+
+    .vite-chip__border {
+      border-width: 5px;
+      transition: all 1s ease;
+    }
+
+    .vite-chip__logo {
+      opacity: 1;
+      filter: grayscale(0);
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+}
+
+@keyframes shimmer {
+  to {
+    background-position-x: 0;
+  }
+}
+
+.hero__background {
+  position: absolute;
+  top: -30%;
+  left: 0;
+  right: 0;
+  bottom: -60%;
+  width: 100%;
+  z-index: -1;
+  opacity: 0.4;
+  transition: opacity 1s ease;
+
+  @media (min-width: 768px) {
+    opacity: 0.1;
+  }
+
+  background: url('/noise.png'),
+    radial-gradient(
+      circle at right center,
+      rgb(86, 50, 119) 0%,
+      rgba(74, 55, 140, 1) 30%,
+      rgb(65, 114, 194) 55%,
+      rgba(50, 81, 115, 0.5) 100%
+    );
+  mask-image: radial-gradient(
+    ellipse 300% 30% at center center,
+    rgba(0, 0, 0, 1) 20%,
+    rgba(0, 0, 0, 0.5) 50%,
+    rgba(0, 0, 0, 0) 100%
+  );
+
+  @media (min-width: 1024px) {
+    background: url('/noise.png'),
+      radial-gradient(
+        circle at right center,
+        rgba(75, 41, 105, 0.5) 0%,
+        rgb(86, 50, 119) 25%,
+        rgba(74, 55, 140, 1) 40%,
+        rgb(64, 102, 168) 65%,
+        rgba(50, 81, 115, 0.5) 100%
+      );
+    mask-image: radial-gradient(
+      ellipse 150% 30% at center center,
+      rgba(0, 0, 0, 1) 20%,
+      rgba(0, 0, 0, 0.5) 50%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  @media (min-width: 1500px) {
+    background: url('/noise.png'),
+      radial-gradient(
+        circle at right center,
+        rgba(75, 41, 105, 0.5) 0%,
+        rgb(86, 50, 119) 25%,
+        rgba(74, 55, 140, 1) 45%,
+        rgb(64, 102, 168) 65%,
+        rgba(50, 81, 115, 0.5) 100%
+      );
+    mask-image: radial-gradient(
+      ellipse 80% 40% at center center,
+      rgba(0, 0, 0, 1) 20%,
+      rgba(0, 0, 0, 0.5) 50%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  @media (min-width: 1800px) {
+    background: url('/noise.png'),
+      radial-gradient(
+        circle at right center,
+        rgba(75, 41, 105, 0.5) 0%,
+        rgb(86, 50, 119) 25%,
+        rgba(74, 55, 140, 1) 50%,
+        rgb(64, 102, 168) 70%,
+        rgba(50, 81, 115, 0.5) 100%
+      );
+    mask-image: radial-gradient(
+      ellipse 80% 40% at center center,
+      rgba(0, 0, 0, 1) 20%,
+      rgba(0, 0, 0, 0.5) 50%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  &.active {
+    opacity: 0.4;
+
+    @media (min-width: 768px) {
+      opacity: 0.7;
+    }
+  }
+}
+
+@keyframes rotateGradient {
+  0% {
+    border-image-source: linear-gradient(
+      to bottom right,
+      rgba(0, 0, 0, 0) 60%,
+      rgba(255, 255, 255, 0.15) 65%,
+      rgba(0, 0, 0, 0) 90%
+    );
+  }
+  25% {
+    border-image-source: linear-gradient(
+      to right top,
+      rgba(0, 0, 0, 0) 60%,
+      rgba(255, 255, 255, 0.15) 65%,
+      rgba(0, 0, 0, 0) 90%
+    );
+  }
+  50% {
+    border-image-source: linear-gradient(
+      to top left,
+      rgba(0, 0, 0, 0) 60%,
+      rgba(255, 255, 255, 0.15) 65%,
+      rgba(0, 0, 0, 0) 90%
+    );
+  }
+  75% {
+    border-image-source: linear-gradient(
+      to left bottom,
+      rgba(0, 0, 0, 0) 60%,
+      rgba(255, 255, 255, 0.15) 65%,
+      rgba(0, 0, 0, 0) 90%
+    );
+  }
+  100% {
+    border-image-source: linear-gradient(
+      to bottom right,
+      rgba(0, 0, 0, 0) 60%,
+      rgba(255, 255, 255, 0.15) 65%,
+      rgba(0, 0, 0, 0) 90%
+    );
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue b/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue
new file mode 100644
index 00000000..26109328
--- /dev/null
+++ b/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue	
@@ -0,0 +1,137 @@
+<script setup>
+import HeroDiagram from './HeroDiagram.vue'
+</script>
+
+<template>
+  <div class="hero">
+    <div class="container">
+      <!-- ViteConf Replay Button -->
+      <a href="https://viteconf.org/" class="hero__pill" target="_blank">
+        <img src="/viteconf.svg" alt="Viteconf logo" width="20" height="20" />
+        <span>ViteConf 2024 - Oct 3rd & 4th</span>
+      </a>
+
+      <!-- Heading -->
+      <h1>The Build Tool<br />for the Web</h1>
+      <!-- Tagline -->
+      <h3>
+        Vite は、次世代の<wbr /> Web アプリケーションを支える<wbr />超高速フロントエンド<wbr />ビルドツールです。
+
+      </h3>
+
+      <!-- CTA Buttons -->
+      <div class="hero__actions">
+        <a href="/guide/" class="btn btn--primary">はじめる</a>
+        <a
+          href="https://github.com/vitejs/vite"
+          target="_blank"
+          class="btn btn--outline"
+        >
+          <img src="/github.svg" alt="GitHub logo" width="20" height="20" />
+          GitHub
+        </a>
+      </div>
+    </div>
+
+    <!-- Animated Diagram -->
+    <HeroDiagram />
+  </div>
+</template>
+
+<style scoped>
+.hero {
+  position: relative;
+  z-index: 2;
+  margin-bottom: 0;
+  background-color: #101010;
+
+  @media (min-width: 768px) {
+    margin-bottom: 60px;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 902px;
+  margin: 60px auto 0;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+
+  @media (min-width: 768px) {
+    margin: 95px auto 0;
+  }
+}
+
+.hero__pill {
+  color: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.3px;
+  display: inline-flex;
+  padding: 6px 16px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 100px;
+  border: 1px solid rgba(189, 52, 254, 0.5);
+  background: radial-gradient(
+    1686.42% 113.39% at 83.25% 2.56%,
+    rgba(189, 52, 254, 0.1) 0%,
+    rgba(189, 52, 254, 0) 100%
+  );
+  box-shadow: none;
+  margin-bottom: 40px;
+
+  @media (min-width: 768px) {
+    margin-bottom: 25px;
+  }
+
+  span {
+    color: #fff;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: -0.28px;
+  }
+
+  &:hover {
+    animation: hero-pill-glow 1600ms ease-out infinite alternate;
+  }
+}
+
+@keyframes hero-pill-glow {
+  0% {
+    border-color: rgba(189, 52, 254, 0.5);
+    box-shadow:
+      0 0 5px rgba(189, 52, 254, 0.01),
+      inset 0 0 5px rgba(189, 52, 254, 0.1);
+  }
+  100% {
+    border-color: rgba(189, 52, 254, 0.6);
+    box-shadow:
+      0 0 20px rgba(189, 52, 254, 0.2),
+      inset 0 0 10px rgba(189, 52, 254, 0.2);
+  }
+}
+
+.hero__actions {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-top: 20px;
+
+  @media (min-width: 768px) {
+    margin-top: 0;
+  }
+}
+
+h3 {
+  white-space: nowrap; /* 日本語版: 改行位置の調整のため */
+}
+</style>
diff --git a/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgBlueIndicator.vue b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgBlueIndicator.vue
new file mode 100644
index 00000000..6f5854f7
--- /dev/null
+++ b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgBlueIndicator.vue	
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+defineProps({
+  active: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <svg
+    width="142"
+    height="82"
+    viewBox="0 0 142 82"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="blue-indicator"
+    :class="{ active: active }"
+  >
+    <g opacity="0.2" filter="url(#filter0_d_1_2)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M136.073 3V45.1271C136.073 51.5014 130.905 56.6688 124.531 56.6688H40.2769V54.3604H124.531C129.63 54.3604 133.764 50.2265 133.764 45.1271V3H136.073Z"
+        fill="#0D0D0D"
+      />
+      <path
+        d="M136.361 3V2.71146H136.073H133.764H133.476V3V45.1271C133.476 50.0672 129.471 54.0719 124.531 54.0719H40.2769H39.9883V54.3604V56.6688V56.9573H40.2769H124.531C131.065 56.9573 136.361 51.6607 136.361 45.1271V3Z"
+        stroke="#404040"
+        stroke-width="0.577083"
+      />
+    </g>
+    <g filter="url(#filter1_i_1_2)">
+      <rect
+        x="12"
+        y="69.9419"
+        width="30.0083"
+        height="30.0083"
+        rx="5.01812"
+        transform="rotate(-90 12 69.9419)"
+        fill="#1F1F1F"
+      />
+    </g>
+    <rect
+      x="12"
+      y="69.9419"
+      width="30.0083"
+      height="30.0083"
+      rx="5.01812"
+      transform="rotate(-90 12 69.9419)"
+      stroke="#2C2C2C"
+      stroke-opacity="0.4"
+      stroke-width="3.75141"
+    />
+    <path
+      d="M18.4048 57.9946C18.4048 57.3366 18.9382 56.8032 19.5961 56.8032H24.3614C25.0194 56.8032 25.5528 57.3366 25.5528 57.9946V62.7599C25.5528 63.4179 25.0194 63.9512 24.3614 63.9512H19.5961C18.9382 63.9512 18.4048 63.4179 18.4048 62.7599V57.9946Z"
+      fill="#41D1FF"
+      v-show="active"
+    />
+    <path
+      d="M18.4048 57.9946C18.4048 57.3366 18.9382 56.8032 19.5961 56.8032H24.3614C25.0194 56.8032 25.5528 57.3366 25.5528 57.9946V62.7599C25.5528 63.4179 25.0194 63.9512 24.3614 63.9512H19.5961C18.9382 63.9512 18.4048 63.4179 18.4048 62.7599V57.9946Z"
+      fill="white"
+      fill-opacity="0.5"
+    />
+    <path
+      d="M27.9354 57.9946C27.9354 57.3366 28.4688 56.8032 29.1268 56.8032H33.8921C34.5501 56.8032 35.0834 57.3366 35.0834 57.9946V62.7599C35.0834 63.4179 34.5501 63.9512 33.8921 63.9512H29.1268C28.4688 63.9512 27.9354 63.4179 27.9354 62.7599V57.9946Z"
+      fill="#41D1FF"
+      v-show="active"
+    />
+    <path
+      d="M27.9354 57.9946C27.9354 57.3366 28.4688 56.8032 29.1268 56.8032H33.8921C34.5501 56.8032 35.0834 57.3366 35.0834 57.9946V62.7599C35.0834 63.4179 34.5501 63.9512 33.8921 63.9512H29.1268C28.4688 63.9512 27.9354 63.4179 27.9354 62.7599V57.9946Z"
+      fill="white"
+      fill-opacity="0.5"
+    />
+    <path
+      d="M27.9354 47.6694C27.9354 47.0114 28.4688 46.478 29.1268 46.478H33.8921C34.5501 46.478 35.0834 47.0114 35.0834 47.6694V52.4347C35.0834 53.0926 34.5501 53.626 33.8921 53.626H29.1268C28.4688 53.626 27.9354 53.0926 27.9354 52.4347V47.6694Z"
+      fill="#41D1FF"
+      v-show="active"
+    />
+    <path
+      d="M27.9354 47.6694C27.9354 47.0114 28.4688 46.478 29.1268 46.478H33.8921C34.5501 46.478 35.0834 47.0114 35.0834 47.6694V52.4347C35.0834 53.0926 34.5501 53.626 33.8921 53.626H29.1268C28.4688 53.626 27.9354 53.0926 27.9354 52.4347V47.6694Z"
+      fill="white"
+      fill-opacity="0.5"
+    />
+    <path
+      d="M18.4048 47.6694C18.4048 47.0114 18.9382 46.478 19.5961 46.478H24.3614C25.0194 46.478 25.5528 47.0114 25.5528 47.6694V52.4347C25.5528 53.0926 25.0194 53.626 24.3614 53.626H19.5961C18.9382 53.626 18.4048 53.0926 18.4048 52.4347V47.6694Z"
+      fill="#41D1FF"
+      v-show="active"
+    />
+    <path
+      d="M18.4048 47.6694C18.4048 47.0114 18.9382 46.478 19.5961 46.478H24.3614C25.0194 46.478 25.5528 47.0114 25.5528 47.6694V52.4347C25.5528 53.0926 25.0194 53.626 24.3614 53.626H19.5961C18.9382 53.626 18.4048 53.0926 18.4048 52.4347V47.6694Z"
+      fill="white"
+      fill-opacity="0.5"
+    />
+    <g filter="url(#filter2_f_1_2)" v-show="active">
+      <path
+        d="M18.4048 57.9946C18.4048 57.3366 18.9382 56.8032 19.5961 56.8032H24.3614C25.0194 56.8032 25.5528 57.3366 25.5528 57.9946V62.7599C25.5528 63.4179 25.0194 63.9512 24.3614 63.9512H19.5961C18.9382 63.9512 18.4048 63.4179 18.4048 62.7599V57.9946Z"
+        fill="#41D1FF"
+      />
+      <path
+        d="M27.9354 57.9946C27.9354 57.3366 28.4688 56.8032 29.1268 56.8032H33.8921C34.5501 56.8032 35.0834 57.3366 35.0834 57.9946V62.7599C35.0834 63.4179 34.5501 63.9512 33.8921 63.9512H29.1268C28.4688 63.9512 27.9354 63.4179 27.9354 62.7599V57.9946Z"
+        fill="#41D1FF"
+      />
+      <path
+        d="M27.9354 47.6694C27.9354 47.0114 28.4688 46.478 29.1268 46.478H33.8921C34.5501 46.478 35.0834 47.0114 35.0834 47.6694V52.4347C35.0834 53.0926 34.5501 53.626 33.8921 53.626H29.1268C28.4688 53.626 27.9354 53.0926 27.9354 52.4347V47.6694Z"
+        fill="#41D1FF"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_1_2"
+        x="35.0831"
+        y="0.114583"
+        width="106.183"
+        height="64.0563"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="2.30833" />
+        <feGaussianBlur stdDeviation="2.30833" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1_2"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1_2"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter1_i_1_2"
+        x="10.1243"
+        y="38.0579"
+        width="33.7597"
+        height="33.7597"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="2.30833" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0"
+        />
+        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_2" />
+      </filter>
+      <filter
+        id="filter2_f_1_2"
+        x="0.802473"
+        y="28.8757"
+        width="51.8833"
+        height="52.6778"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feGaussianBlur
+          stdDeviation="8.80116"
+          result="effect1_foregroundBlur_1_2"
+        />
+      </filter>
+    </defs>
+  </svg>
+  <!-- Blue Glow -->
+  <div class="blue-glow" :class="{ active: active }" />
+</template>
+
+<style scoped>
+.blue-indicator {
+  position: absolute;
+  top: 387px;
+  left: 680px;
+  opacity: 0.2;
+  transition: opacity 1s ease-in-out;
+
+  &.active {
+    transition: opacity 0.2s ease-in-out;
+    opacity: 0.6;
+  }
+}
+
+.blue-glow {
+  background-color: #41d1ff;
+  width: 100px;
+  aspect-ratio: 2;
+  position: absolute;
+  top: 415px;
+  left: 655px;
+  z-index: -1;
+  filter: blur(40px);
+  opacity: 0;
+  transition: all 3s ease-out;
+  will-change: opacity;
+  display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+    filter: blur(60px);
+  }
+
+  &.active {
+    transition: all 0.2s ease-in-out;
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgInputs.vue b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgInputs.vue
new file mode 100644
index 00000000..c4fe4d32
--- /dev/null
+++ b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgInputs.vue	
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import SvgNode, { SvgNodeProps } from '../../common/SvgNode.vue'
+import { Ref } from 'vue'
+
+defineProps({
+  inputLines: {
+    type: Array as () => Ref<SvgNodeProps>[],
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="844"
+    height="644"
+    viewBox="0 0 844 644"
+    fill="none"
+    class="input-lines"
+  >
+    <!-- Input Lines -->
+    <g v-for="inputLine in inputLines" :key="inputLine.value.path">
+      <path
+        :d="inputLine.value.path"
+        stroke="url(#base_gradient)"
+        stroke-width="1.2"
+        style="opacity: 0.8"
+      />
+      <SvgNode v-bind="inputLine.value" />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="base_gradient"
+        x1="88.1032"
+        y1="324.167"
+        x2="843.505"
+        y2="324.167"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stop-color="#c6caff" stop-opacity="0" />
+        <stop offset="0.2" stop-color="#c6caff" stop-opacity="0.1" />
+        <stop offset="0.4" stop-color="white" stop-opacity="0.4" />
+        <stop offset="0.6" stop-color="#c6caff" stop-opacity="0.2" />
+        <stop offset="0.8" stop-color="#c6caff" stop-opacity="0.2" />
+        <stop offset="0.9" stop-color="#c6caff" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+.input-lines {
+  transform: translate3d(0, 0, 0);
+
+  &:deep(.circle-dot) {
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgOutputs.vue b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgOutputs.vue
new file mode 100644
index 00000000..320e9997
--- /dev/null
+++ b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgOutputs.vue	
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import SvgNode, { SvgNodeProps } from '../../common/SvgNode.vue'
+import { Ref } from 'vue'
+
+defineProps({
+  outputLines: {
+    type: Array as () => Ref<SvgNodeProps>[],
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="844"
+    height="80"
+    viewBox="0 0 844 40"
+    fill="none"
+    class="output-line"
+    style="opacity: 0.8"
+  >
+    <path
+      d="M843.463 1.3315L245.316 5.47507L0.633077 4.69725"
+      stroke="url(#output_gradient)"
+      stroke-width="1.2"
+    />
+    <g v-for="outputLine in outputLines">
+      <SvgNode
+        path="M843.463 1.3315L245.316 5.47507L0.633077 4.69725"
+        :position="outputLine.value.position"
+        :visible="outputLine.value.visible"
+        :label-visible="outputLine.value.labelVisible"
+        :label="outputLine.value.label"
+        dot-color="#d499ff"
+        glow-color="#BD34FE"
+      />
+    </g>
+    <defs>
+      <linearGradient id="output_gradient" gradientUnits="userSpaceOnUse">
+        <stop offset="0.1" stop-color="#E0C8FF" stop-opacity="0" />
+        <stop offset="0.4" stop-color="#E0C8FF" stop-opacity="0.4" />
+        <stop offset="1" stop-color="#E0C8FF" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+.output-line {
+  position: absolute;
+  top: 300px;
+  left: 785px;
+  transform: translate3d(0, 0, 0);
+}
+</style>
diff --git a/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgPinkIndicator.vue b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgPinkIndicator.vue
new file mode 100644
index 00000000..063816b6
--- /dev/null
+++ b/.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgPinkIndicator.vue	
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+defineProps({
+  active: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <svg
+    width="141"
+    height="67"
+    viewBox="0 0 141 67"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="pink-indicator"
+    :class="{ active: active }"
+  >
+    <g opacity="0.2" filter="url(#filter0_d_1_8)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.48397 58.9922L5.48397 36.8651C5.48397 30.4908 10.6514 25.3234 17.0256 25.3234L101.28 25.3234L101.28 27.6318L17.0256 27.6318C11.9262 27.6318 7.7923 31.7657 7.7923 36.8651L7.7923 58.9922L5.48397 58.9922Z"
+        fill="#0D0D0D"
+      />
+      <path
+        d="M5.19543 58.9922L5.19543 59.2807L5.48397 59.2807L7.79231 59.2807L8.08085 59.2807L8.08085 58.9922L8.08085 36.8651C8.08085 31.925 12.0856 27.9203 17.0256 27.9203L101.28 27.9203L101.568 27.9203L101.568 27.6318L101.568 25.3234L101.568 25.0349L101.28 25.0349L17.0256 25.0349C10.492 25.0349 5.19542 30.3315 5.19543 36.8651L5.19543 58.9922Z"
+        stroke="#404040"
+        stroke-width="0.577083"
+      />
+    </g>
+    <g filter="url(#filter1_i_1_8)">
+      <rect
+        x="130.134"
+        y="12.0518"
+        width="30.0083"
+        height="30.0083"
+        rx="5.01812"
+        transform="rotate(90 130.134 12.0518)"
+        fill="#1F1F1F"
+      />
+    </g>
+    <rect
+      x="130.134"
+      y="12.0518"
+      width="30.0083"
+      height="30.0083"
+      rx="5.01812"
+      transform="rotate(90 130.134 12.0518)"
+      stroke="#2C2C2C"
+      stroke-opacity="0.4"
+      stroke-width="3.75141"
+    />
+    <g filter="url(#filter2_f_1_8)">
+      <path
+        d="M123.152 23.9976C123.152 24.6556 122.619 25.1889 121.961 25.1889L117.196 25.1889C116.538 25.1889 116.004 24.6556 116.004 23.9976L116.004 19.2323C116.004 18.5743 116.538 18.041 117.196 18.041L121.961 18.041C122.619 18.041 123.152 18.5743 123.152 19.2323L123.152 23.9976Z"
+        fill="#BD34FE"
+      />
+      <path
+        d="M113.622 23.9976C113.622 24.6556 113.088 25.1889 112.43 25.1889L107.665 25.1889C107.007 25.1889 106.474 24.6556 106.474 23.9976L106.474 19.2323C106.474 18.5743 107.007 18.041 107.665 18.041L112.43 18.041C113.088 18.041 113.622 18.5743 113.622 19.2323L113.622 23.9976Z"
+        fill="#BD34FE"
+      />
+      <path
+        d="M113.622 34.3228C113.622 34.9808 113.088 35.5142 112.43 35.5142L107.665 35.5142C107.007 35.5142 106.474 34.9808 106.474 34.3228L106.474 29.5575C106.474 28.8996 107.007 28.3662 107.665 28.3662L112.43 28.3662C113.088 28.3662 113.622 28.8996 113.622 29.5575L113.622 34.3228Z"
+        fill="#BD34FE"
+      />
+    </g>
+    <rect
+      x="110.513"
+      y="22.439"
+      width="9.23333"
+      height="9.23333"
+      rx="1.15417"
+      fill="#BD34FE"
+      v-show="active"
+    />
+    <rect
+      x="110.513"
+      y="22.439"
+      width="9.23333"
+      height="9.23333"
+      rx="1.15417"
+      fill="white"
+      fill-opacity="0.5"
+    />
+    <g filter="url(#filter3_f_1_8)">
+      <rect
+        x="108.205"
+        y="20.1309"
+        width="13.85"
+        height="13.85"
+        rx="1.73125"
+        fill="#BD34FE"
+        fill-opacity="0.5"
+        v-show="active"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_1_8"
+        x="0.290218"
+        y="22.438"
+        width="106.183"
+        height="44.0563"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="2.30833" />
+        <feGaussianBlur stdDeviation="2.30833" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1_8"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1_8"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter1_i_1_8"
+        x="98.2503"
+        y="10.1761"
+        width="33.7597"
+        height="33.7597"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="2.30833" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0"
+        />
+        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_8" />
+      </filter>
+      <filter
+        id="filter2_f_1_8"
+        x="88.8714"
+        y="0.438646"
+        width="51.8833"
+        height="52.6778"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feGaussianBlur
+          stdDeviation="8.80116"
+          result="effect1_foregroundBlur_1_8"
+        />
+      </filter>
+      <filter
+        id="filter3_f_1_8"
+        x="96.6634"
+        y="8.58919"
+        width="36.9333"
+        height="36.9333"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feGaussianBlur
+          stdDeviation="5.77083"
+          result="effect1_foregroundBlur_1_8"
+        />
+      </filter>
+    </defs>
+  </svg>
+  <!-- Pink Glow -->
+  <div class="pink-glow" :class="{ active: active }" />
+</template>
+
+<style scoped>
+.pink-indicator {
+  position: absolute;
+  top: 202px;
+  left: 840px;
+  opacity: 0.2;
+  transition: opacity 1s ease-in-out;
+
+  &.active {
+    transition: opacity 0.2s ease-in-out;
+    opacity: 0.6;
+  }
+}
+
+.pink-glow {
+  background-color: #bd34fe;
+  width: 100px;
+  aspect-ratio: 2;
+  position: absolute;
+  top: 202px;
+  left: 905px;
+  z-index: -1;
+  filter: blur(40px);
+  opacity: 0;
+  transition: all 3s ease-out;
+  will-change: opacity;
+  display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+    filter: blur(60px);
+  }
+
+  &.active {
+    transition: all 0.2s ease-in-out;
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue
new file mode 100644
index 00000000..10272c23
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue	
@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { Ref, ref } from 'vue'
+import SvgNode from '../common/SvgNode.vue'
+import { gsap } from 'gsap'
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+// Animation state
+const glowPosition: Ref<number> = ref(0)
+const glowVisible: Ref<boolean> = ref(false)
+const checkmarks = Array.from({ length: 13 }, (): Ref<boolean> => ref(false))
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#continuous-integration')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { startAnimation, isCardActive } = useCardAnimation(
+  '#continuous-integration',
+  () => {
+    // Reset initial state
+    glowPosition.value = 0
+    glowVisible.value = false
+
+    // Define the timeline
+    const timeline = gsap.timeline()
+
+    // Move the glowing lines from top to bottom
+    timeline.to(
+      glowPosition,
+      {
+        value: 1,
+        duration: 1.5,
+        ease: 'power2.in',
+      },
+      0,
+    )
+
+    // Make the glowing lines visible
+    timeline.call(
+      () => {
+        glowVisible.value = true
+      },
+      null,
+      0.2,
+    )
+    // Make the glowing lines hidden shortly after
+    timeline.call(
+      () => {
+        glowVisible.value = false
+      },
+      null,
+      1.1,
+    )
+
+    // Stagger the checkmarks
+    checkmarks.forEach((checkmark, index) => {
+      timeline.call(
+        () => {
+          checkmark.value = true
+        },
+        null,
+        1.3 + index * 0.2,
+      )
+    })
+
+    // All done
+    return timeline
+  },
+  {
+    once: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="feature-card"
+    id="continuous-integration"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization" :class="{ active: isCardActive }">
+      <div class="camera-container">
+        <svg
+          class="grid"
+          width="720"
+          height="241"
+          viewBox="0 0 720 241"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.00048 119.402L200.243 68.2732C213.283 65.4129 221.832 58.4923 221.832 50.7968V20.323V1M1.00048 136.779L231.212 68.7423C242.847 65.5523 250.195 59.0356 250.195 51.9076V20.323V1M1 165.731L263.267 69.1267C272.82 65.6348 278.558 59.7587 278.558 53.4667V20.323V1M719.001 154.23L464.019 69.1276C454.474 65.6348 448.743 59.7616 448.743 53.4731V20.323V1M719.001 125.219L496.078 68.7439C484.449 65.5528 477.106 59.0377 477.106 51.9119V20.323V1M719 107.817L527.05 68.2749C514.015 65.4134 505.469 58.4939 505.469 50.8001V20.323V1M719.001 96.2159L557.314 67.8323C543.291 65.2673 533.835 58.0756 533.835 49.976V20.323V9.78386C533.835 4.93267 529.902 1 525.051 1H505.469M1 107.817L169.982 67.8308C184.008 65.2668 193.467 58.0743 193.467 49.9735V20.323V9.78387C193.467 4.93267 197.4 1 202.251 1H221.832M221.832 1H250.195M250.195 1H278.558M278.558 1H306.924M306.924 1V20.323V55.7423C306.924 60.7337 303.306 65.5207 296.865 69.0509L62.8139 197.336C52.968 202.733 46.8471 213.068 46.8471 224.296V240.342M306.924 1H335.286M335.286 1V20.323V59.0919C335.286 62.0155 334.043 64.8989 331.656 67.5136L213.175 197.282C208.003 202.947 205.136 210.34 205.136 218.011V240.342M335.286 1H363.65M363.65 1V20.323L363.428 206.088V240.342M363.65 1H392.015M392.015 1V20.323V59.1056C392.015 62.0204 393.25 64.8954 395.624 67.5041L513.712 197.291C518.862 202.951 521.716 210.328 521.716 217.981V240.342M392.015 1H420.377M420.377 1V20.323V55.7518C420.377 60.7376 423.987 65.5197 430.415 69.0489L664.058 197.332C673.893 202.732 680.005 213.061 680.005 224.28V240.342M420.377 1H448.743M448.743 1H477.106M477.106 1H505.469"
+            stroke="url(#paint0_linear_0_3)"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_0_3"
+              x1="362.013"
+              y1="-25.478"
+              x2="362.013"
+              y2="240.781"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0" stop-color="white" stop-opacity="0" />
+              <stop offset="0.7" stop-color="white" stop-opacity="0.35" />
+              <stop offset="1" stop-color="white" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <span class="ci-text">CI Tests</span>
+        <div class="checkmark-container">
+          <svg
+            class="checkmark"
+            v-for="i in 5"
+            :class="{ active: checkmarks[i].value }"
+            width="52"
+            height="52"
+            viewBox="0 0 52 52"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              class="circle-glow"
+              opacity="0.4"
+              filter="url(#filter-circle-glow)"
+            >
+              <circle cx="25.712" cy="25.9725" r="17.6105" fill="#13B351" />
+            </g>
+            <circle
+              class="circle-bg"
+              cx="25.712"
+              cy="25.9725"
+              r="18.0268"
+              fill="#171717"
+            />
+            <circle
+              class="circle-specular"
+              cx="25.712"
+              cy="25.9725"
+              r="18.0268"
+              stroke="url(#radial-circle-specular)"
+              stroke-width="0.8"
+            />
+            <path
+              class="checkmark-icon"
+              d="M32.4256 21.1798C32.3326 21.086 32.2219 21.0115 32.1 20.9607C31.9781 20.9099 31.8473 20.8838 31.7152 20.8838C31.5831 20.8838 31.4523 20.9099 31.3304 20.9607C31.2085 21.0115 31.0978 21.086 31.0048 21.1798L23.5504 28.6442L20.4185 25.5023C20.3219 25.409 20.2079 25.3357 20.083 25.2864C19.9581 25.2372 19.8246 25.2131 19.6904 25.2154C19.5561 25.2177 19.4236 25.2465 19.3005 25.3C19.1773 25.3535 19.0659 25.4308 18.9726 25.5273C18.8793 25.6239 18.806 25.7379 18.7568 25.8629C18.7075 25.9878 18.6834 26.1212 18.6857 26.2555C18.688 26.3897 18.7168 26.5222 18.7703 26.6454C18.8238 26.7685 18.9011 26.8799 18.9977 26.9732L22.8399 30.8155C22.933 30.9093 23.0436 30.9837 23.1656 31.0345C23.2875 31.0853 23.4183 31.1115 23.5504 31.1115C23.6824 31.1115 23.8132 31.0853 23.9352 31.0345C24.0571 30.9837 24.1678 30.9093 24.2608 30.8155L32.4256 22.6506C32.5272 22.5569 32.6082 22.4432 32.6637 22.3166C32.7191 22.1901 32.7477 22.0534 32.7477 21.9152C32.7477 21.777 32.7191 21.6403 32.6637 21.5138C32.6082 21.3872 32.5272 21.2735 32.4256 21.1798Z"
+              fill="#7fd5a0"
+            />
+            <g
+              class="checkmark-icon__glow"
+              filter="url(#filter-checkmark-icon-glow)"
+            >
+              <path
+                d="M32.4256 21.1798C32.3326 21.086 32.2219 21.0115 32.1 20.9607C31.9781 20.9099 31.8473 20.8838 31.7152 20.8838C31.5831 20.8838 31.4523 20.9099 31.3304 20.9607C31.2085 21.0115 31.0978 21.086 31.0048 21.1798L23.5504 28.6442L20.4185 25.5023C20.3219 25.409 20.2079 25.3357 20.083 25.2864C19.9581 25.2372 19.8246 25.2131 19.6904 25.2154C19.5561 25.2177 19.4236 25.2465 19.3005 25.3C19.1773 25.3535 19.0659 25.4308 18.9726 25.5273C18.8793 25.6239 18.806 25.7379 18.7568 25.8629C18.7075 25.9878 18.6834 26.1212 18.6857 26.2555C18.688 26.3897 18.7168 26.5222 18.7703 26.6454C18.8238 26.7685 18.9011 26.8799 18.9977 26.9732L22.8399 30.8155C22.933 30.9093 23.0436 30.9837 23.1656 31.0345C23.2875 31.0853 23.4183 31.1115 23.5504 31.1115C23.6824 31.1115 23.8132 31.0853 23.9352 31.0345C24.0571 30.9837 24.1678 30.9093 24.2608 30.8155L32.4256 22.6506C32.5272 22.5569 32.6082 22.4432 32.6637 22.3166C32.7191 22.1901 32.7477 22.0534 32.7477 21.9152C32.7477 21.777 32.7191 21.6403 32.6637 21.5138C32.6082 21.3872 32.5272 21.2735 32.4256 21.1798Z"
+                fill="#13B351"
+              />
+            </g>
+            <defs>
+              <filter
+                id="filter-circle-glow"
+                x="0.0968113"
+                y="0.357309"
+                width="51.2302"
+                height="51.2304"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB"
+              >
+                <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                <feBlend
+                  mode="normal"
+                  in="SourceGraphic"
+                  in2="BackgroundImageFix"
+                  result="shape"
+                />
+                <feGaussianBlur
+                  stdDeviation="4.00238"
+                  result="effect1_foregroundBlur_698_23226"
+                />
+              </filter>
+              <filter
+                id="filter-checkmark-icon-glow"
+                x="-2.30491"
+                y="-2.04392"
+                width="56.0332"
+                height="56.0332"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB"
+              >
+                <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                <feBlend
+                  mode="normal"
+                  in="SourceGraphic"
+                  in2="BackgroundImageFix"
+                  result="shape"
+                />
+                <feGaussianBlur
+                  stdDeviation="8.00475"
+                  result="effect1_foregroundBlur_698_23226"
+                />
+              </filter>
+              <radialGradient
+                id="radial-circle-specular"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(33.4166 23.1423) rotate(110.653) scale(21.8445)"
+              >
+                <stop offset="0" stop-color="white" />
+                <stop offset="1" stop-opacity="0" />
+              </radialGradient>
+            </defs>
+          </svg>
+        </div>
+        <svg
+          class="grid"
+          width="720"
+          height="241"
+          viewBox="0 0 720 241"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <SvgNode
+            path="M1.00048 119.402L200.243 68.2732C213.283 65.4129 221.832 58.4923 221.832 50.7968V20.323V1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M1.00048 136.779L231.212 68.7423C242.847 65.5523 250.195 59.0356 250.195 51.9076V20.323V1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M1 165.731L263.267 69.1267C272.82 65.6348 278.558 59.7587 278.558 53.4667V20.323V1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M719.001 154.23L464.019 69.1276C454.474 65.6348 448.743 59.7616 448.743 53.4731V20.323V1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M719.001 125.219L496.078 68.7439C484.449 65.5528 477.106 59.0377 477.106 51.9119V20.323V1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M719 107.817L527.05 68.2749C514.015 65.4134 505.469 58.4939 505.469 50.8001V20.323V1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M719.001 96.2159L557.314 67.8323C543.291 65.2673 533.835 58.0756 533.835 49.976V20.323V9.78386C533.835 4.93267 529.902 1 525.051 1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M1 107.817L169.982 67.8308C184.008 65.2668 193.467 58.0743 193.467 49.9735V20.323V9.78387C193.467 4.93267 197.4 1 202.251 1"
+            :position="glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M306.924 1V20.323V55.7423C306.924 60.7337 303.306 65.5207 296.865 69.0509L62.8139 197.336C52.968 202.733 46.8471 213.068 46.8471 224.296V240.342"
+            :position="1 - glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M335.286 1V20.323V59.0919C335.286 62.0155 334.043 64.8989 331.656 67.5136L213.175 197.282C208.003 202.947 205.136 210.34 205.136 218.011V240.342"
+            :position="1 - glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M363.65 1V20.323L363.428 206.088V240.342"
+            :position="1 - glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M392.015 1V20.323V59.1056C392.015 62.0204 393.25 64.8954 395.624 67.5041L513.712 197.291C518.862 202.951 521.716 210.328 521.716 217.981V240.342"
+            :position="1 - glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+          <SvgNode
+            path="M420.377 1V20.323V55.7518C420.377 60.7376 423.987 65.5197 430.415 69.0489L664.058 197.332C673.893 202.732 680.005 213.061 680.005 224.28V240.342"
+            :position="1 - glowPosition"
+            :visible="glowVisible"
+            :dot-color="false"
+            glow-color="#13B351"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="feature__meta meta--center">
+      <div class="meta__title">継続的なエコシステム統合</div>
+      <div class="meta__description">
+        私たちの CI は、下流のプロジェクトに対して Vite の変更を継続的にテストしており、安定性と信頼性を備えた Vite の改善が可能となっています。
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-card {
+  @media (min-width: 768px) {
+    transform: translate3d(60px, 0, 0);
+  }
+
+  .feature__meta {
+    max-width: 500px;
+  }
+
+  /* Extend height on smaller devices, to make room for text */
+  @media (max-width: 450px) {
+    height: 420px;
+  }
+
+  /* Even smaller in some cases */
+  @media (max-width: 380px) {
+    height: 460px;
+  }
+}
+
+.feature__visualization {
+  mask-image: linear-gradient(
+    to bottom,
+    #ffffff,
+    #ffffff 180px,
+    transparent 240px
+  );
+  position: relative;
+
+  .camera-container {
+    width: 720px;
+    left: 50%;
+    position: relative;
+    transition: transform 3s ease;
+    transform: translate3d(-50%, 80px, 0) scale(1.05);
+  }
+
+  .grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 720px;
+  }
+
+  .ci-text {
+    position: absolute;
+    top: -10px;
+    left: 319px;
+    color: #fff;
+    text-align: center;
+    font-family:
+      IBM Plex Mono,
+      sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 150%;
+    display: block;
+    border-radius: 6px;
+    border: 1px solid #2c2c2c;
+    background: #171717;
+    padding: 6px 14px;
+    z-index: 5;
+  }
+
+  .checkmark-container {
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 160px;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 200px;
+      background: linear-gradient(
+        to bottom,
+        transparent,
+        rgba(19, 179, 81, 0.5)
+      );
+      transition: all 3s ease;
+      transform: translate3d(0, 0, 0) scaleY(0);
+      opacity: 0;
+      will-change: transform, opacity;
+    }
+  }
+
+  .checkmark {
+    position: absolute;
+    top: 220px;
+    filter: drop-shadow(0px 0px 0px rgba(19, 179, 81, 0));
+    z-index: 5;
+
+    .circle-glow,
+    .checkmark-icon__glow,
+    .checkmark-icon {
+      opacity: 0;
+      transition: opacity 0.5s ease-in-out;
+    }
+
+    &:nth-child(1) {
+      left: 22px;
+    }
+
+    &:nth-child(2) {
+      left: 180px;
+    }
+
+    &:nth-child(3) {
+      left: 338px;
+    }
+
+    &:nth-child(4) {
+      left: 497px;
+    }
+
+    &:nth-child(5) {
+      left: 655px;
+    }
+
+    &:not(:nth-child(3)) {
+      display: none;
+    }
+
+    @media (min-width: 500px) {
+      &:not(:nth-child(3)) {
+        display: block;
+      }
+    }
+
+    @media (min-width: 640px) {
+      &:not(:nth-child(3)) {
+        display: none;
+      }
+    }
+
+    @media (min-width: 1040px) {
+      &:not(:nth-child(3)) {
+        display: block;
+      }
+    }
+
+    &.active {
+      filter: drop-shadow(0px -20px 20px rgba(19, 179, 81, 0.7));
+
+      .circle-glow,
+      .checkmark-icon__glow,
+      .checkmark-icon {
+        transition: opacity 0.15s ease-in-out;
+        opacity: 1;
+      }
+    }
+  }
+
+  &.active {
+    .checkmark-container {
+      &:after {
+        transition-delay: 2.5s;
+        transition-duration: 0.5s;
+        transform: translate3d(0, 0, 0) scaleY(1);
+        opacity: 1;
+      }
+    }
+
+    .camera-container {
+      transition: transform 1.5s ease 1s;
+      transform: translate3d(-50%, -100px, 0) scale(1.05);
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue
new file mode 100644
index 00000000..e570ef80
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue	
@@ -0,0 +1,557 @@
+<script setup lang="ts">
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#flexible-plugin-system')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { isCardActive, startAnimation } = useCardAnimation(
+  '#flexible-plugin-system',
+  null,
+  {
+    once: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="feature-card"
+    id="flexible-plugin-system"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization" :class="{ active: isCardActive }">
+      <div class="diagram">
+        <!-- Diagram -->
+        <svg
+          width="686"
+          height="218"
+          viewBox="0 0 686 218"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <g class="pink-chip__base">
+              <rect
+                width="35.0955"
+                height="35.0923"
+                rx="5.87331"
+                transform="matrix(-0.845602 0.533814 -0.895247 -0.44557 611.937 102.855)"
+                fill="#1F1F1F"
+              />
+              <rect
+                width="35.0955"
+                height="35.0923"
+                rx="5.87331"
+                transform="matrix(-0.845602 0.533814 -0.895247 -0.44557 611.937 102.855)"
+                stroke="#2C2C2C"
+                stroke-opacity="0.4"
+                stroke-width="4"
+              />
+            </g>
+            <g class="pink-chip__cube">
+              <path
+                d="M573.798 105.165L573.684 96.2398L581.79 90.9291L590.029 96.0306L590.143 104.956L582.027 109.523L573.798 105.165Z"
+                fill="#BD34FE"
+              />
+              <path
+                d="M573.798 105.165L573.684 96.2398L581.79 90.9291L590.029 96.0306L590.143 104.956L582.027 109.523L573.798 105.165Z"
+                fill="white"
+                fill-opacity="0.5"
+              />
+            </g>
+            <path
+              class="pink-chip__connection"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M440.083 64.7972L456.9 53.3972C463.204 49.4177 473.724 48.8842 480.397 52.2055L565 94.5L562.717 95.9411L478.114 53.6466C472.776 50.9895 464.359 51.4164 459.316 54.6L442.5 66L440.083 64.7972Z"
+              fill="#BD34FE"
+              stroke-width="1.2"
+              stroke="#BD34FE"
+            />
+            <path
+              class="blue-chip__connection"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M270 130L230.567 154.669C224.263 158.648 213.743 159.182 207.07 155.86L122.717 113.941L125 112.5L209.353 154.419C214.691 157.076 223.108 156.65 228.151 153.466L267.583 128.797L270 130Z"
+              fill="#41d1ff"
+              stroke-width="1.2"
+              stroke="#41d1ff"
+            />
+            <g class="blue-chip__base">
+              <rect
+                width="35.0955"
+                height="35.0923"
+                rx="5.87331"
+                transform="matrix(0.845602 -0.533814 0.895247 0.44557 76.1337 105.512)"
+                fill="#1F1F1F"
+                shape-rendering="crispEdges"
+              />
+              <rect
+                width="35.0955"
+                height="35.0923"
+                rx="5.87331"
+                transform="matrix(0.845602 -0.533814 0.895247 0.44557 76.1337 105.512)"
+                stroke="#2C2C2C"
+                stroke-opacity="0.4"
+                stroke-width="4.39073"
+                shape-rendering="crispEdges"
+              />
+            </g>
+            <g class="blue-chip__cube">
+              <path
+                d="M99.902 97.3307L99.7304 90.3097L106.066 86.0571L112.601 89.995L112.773 97.016L106.423 100.684L99.902 97.3307Z"
+                fill="#41D1FF"
+              />
+              <path
+                d="M99.902 97.3307L99.7304 90.3097L106.066 86.0571L112.601 89.995L112.773 97.016L106.423 100.684L99.902 97.3307Z"
+                fill="white"
+                fill-opacity="0.5"
+              />
+              <path
+                d="M110.272 103.431L110.1 96.4099L116.435 92.1574L122.971 96.0953L123.143 103.116L116.793 106.784L110.272 103.431Z"
+                fill="#41D1FF"
+              />
+              <path
+                d="M110.272 103.431L110.1 96.4099L116.435 92.1574L122.971 96.0953L123.143 103.116L116.793 106.784L110.272 103.431Z"
+                fill="white"
+                fill-opacity="0.5"
+              />
+              <path
+                d="M89.6627 103.976L89.491 96.9545L95.8263 92.7019L102.362 96.6398L102.533 103.661L96.1839 107.328L89.6627 103.976Z"
+                fill="#41D1FF"
+              />
+              <path
+                d="M89.6627 103.976L89.491 96.9545L95.8263 92.7019L102.362 96.6398L102.533 103.661L96.1839 107.328L89.6627 103.976Z"
+                fill="white"
+                fill-opacity="0.5"
+              />
+              <path
+                d="M99.4817 109.323L99.31 102.302L105.645 98.0495L112.181 101.987L112.352 109.008L106.003 112.676L99.4817 109.323Z"
+                fill="#41D1FF"
+              />
+              <path
+                d="M99.4817 109.323L99.31 102.302L105.645 98.0495L112.181 101.987L112.352 109.008L106.003 112.676L99.4817 109.323Z"
+                fill="white"
+                fill-opacity="0.5"
+              />
+            </g>
+            <g class="vite-chip" filter="url(#filter-chip-shadow)">
+              <g
+                class="vite-chip__highlight"
+                filter="url(#filter-vite-chip-highlight)"
+              >
+                <rect
+                  width="153.998"
+                  height="153.998"
+                  rx="12.1578"
+                  transform="matrix(0.895247 0.44557 -0.845602 0.533814 330.524 11.7643)"
+                  fill="black"
+                  fill-opacity="0.3"
+                />
+                <rect
+                  width="153.998"
+                  height="153.998"
+                  rx="12.1578"
+                  transform="matrix(0.895247 0.44557 -0.845602 0.533814 330.524 11.7643)"
+                  fill="url(#gradient-vite-chip-highlight)"
+                  fill-opacity="0.1"
+                />
+                <rect
+                  x="-0.0335319"
+                  y="-0.661506"
+                  width="155.349"
+                  height="155.349"
+                  rx="12.8332"
+                  transform="matrix(0.895247 0.44557 -0.845602 0.533814 329.961 11.4709)"
+                  stroke="#111111"
+                  stroke-opacity="0.2"
+                  stroke-width="1.35086"
+                />
+              </g>
+              <g class="vite-chip__base" opacity="0.6">
+                <rect
+                  x="-0.0335319"
+                  y="-0.661506"
+                  width="152.647"
+                  height="152.647"
+                  rx="11.4823"
+                  transform="matrix(0.895247 0.44557 -0.845602 0.533814 330.028 12.7942)"
+                  fill="#1E1E1E"
+                  fill-opacity="0.4"
+                />
+                <rect
+                  x="-0.0335319"
+                  y="-0.661506"
+                  width="152.647"
+                  height="152.647"
+                  rx="11.4823"
+                  transform="matrix(0.895247 0.44557 -0.845602 0.533814 330.028 12.7942)"
+                  stroke="url(#gradient-vite-chip-right-specular)"
+                  stroke-width="1.2"
+                />
+                <rect
+                  x="-0.0335319"
+                  y="-0.661506"
+                  width="152.647"
+                  height="152.647"
+                  rx="11.4823"
+                  transform="matrix(0.895247 0.44557 -0.845602 0.533814 330.028 12.7942)"
+                  stroke="url(#gradient-vite-chip-left-specular)"
+                  stroke-opacity="0.1"
+                  stroke-width="1.2"
+                />
+              </g>
+              <g class="vite-chip__logo">
+                <path
+                  class="vite-chip__v"
+                  opacity="0.8"
+                  d="M395.642 83.0289L299.921 103.639C297.944 104.064 296.066 103.138 296.569 101.986L321.062 45.9169C321.611 44.6617 324.458 44.2276 325.784 45.1971L355.04 66.5878C355.227 66.7242 355.458 66.8388 355.722 66.926L396.329 80.3179C398.203 80.9357 397.789 82.5664 395.642 83.0289Z"
+                  fill="url(#gradient-vite-chip-logo-v)"
+                />
+                <path
+                  class="vite-chip__bolt"
+                  d="M385.841 66.1307L354.84 56.2356C354.33 56.0729 353.664 56.1348 353.22 56.386L325.622 71.9952C324.972 72.3629 325.084 72.9547 325.845 73.178L334.719 75.7797C335.549 76.0232 335.589 76.6913 334.794 77.0355L322.502 82.3582C321.675 82.7165 321.759 83.4171 322.656 83.6352L328.452 85.0438C329.35 85.2623 329.434 85.9642 328.604 86.3219L309.255 94.6628C308.045 95.1845 308.884 96.2149 310.314 95.9628L311.269 95.7944L373.22 80.696C374.258 80.4432 374.42 79.6472 373.495 79.3499L364.632 76.5008C363.799 76.233 363.829 75.5392 364.686 75.2218L385.79 67.4107C386.649 67.0927 386.677 66.3975 385.841 66.1307Z"
+                  fill="url(#gradient-vite-chip-logo-bolt)"
+                />
+              </g>
+            </g>
+          </g>
+          <defs>
+            <filter
+              id="filter-chip-shadow"
+              x="158.878"
+              y="-7.1193"
+              width="350.919"
+              height="231.696"
+              filterUnits="userSpaceOnUse"
+              color-interpolation-filters="sRGB"
+            >
+              <feFlood flood-opacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha"
+              />
+              <feOffset dy="21.6138" />
+              <feGaussianBlur stdDeviation="19.5875" />
+              <feComposite in2="hardAlpha" operator="out" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="BackgroundImageFix"
+                result="effect1_dropShadow_0_5"
+              />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect1_dropShadow_0_5"
+                result="shape"
+              />
+            </filter>
+            <filter
+              id="filter-vite-chip-highlight"
+              x="177.815"
+              y="-12.739"
+              width="313.063"
+              height="199.83"
+              filterUnits="userSpaceOnUse"
+              color-interpolation-filters="sRGB"
+            >
+              <feFlood flood-opacity="0" result="BackgroundImageFix" />
+              <feGaussianBlur in="BackgroundImageFix" stdDeviation="13.5086" />
+              <feComposite
+                in2="SourceAlpha"
+                operator="in"
+                result="effect1_backgroundBlur_0_5"
+              />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect1_backgroundBlur_0_5"
+                result="shape"
+              />
+            </filter>
+            <linearGradient
+              id="gradient-vite-chip-highlight"
+              x1="6.7543"
+              y1="16.8858"
+              x2="131.709"
+              y2="135.086"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0" stop-opacity="0" />
+              <stop offset="0.4" stop-color="white" />
+              <stop offset="1" stop-opacity="0" />
+            </linearGradient>
+            <radialGradient
+              id="gradient-vite-chip-right-specular"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(108.744 63.4905) rotate(110.653) scale(93.8362)"
+            >
+              <stop offset="0" stop-color="white" />
+              <stop offset="1" stop-opacity="0" />
+            </radialGradient>
+            <radialGradient
+              id="gradient-vite-chip-left-specular"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(7.42974 141.165) rotate(-21.5713) scale(93.6927)"
+            >
+              <stop offset="0" stop-color="white" />
+              <stop offset="1" stop-opacity="0" />
+            </radialGradient>
+            <linearGradient
+              id="gradient-vite-chip-logo-v"
+              x1="325.064"
+              y1="42.3995"
+              x2="323.283"
+              y2="100.669"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0" stop-color="#41D1FF" />
+              <stop offset="1" stop-color="#BD34FE" />
+            </linearGradient>
+            <linearGradient
+              id="gradient-vite-chip-logo-bolt"
+              x1="365.666"
+              y1="57.5919"
+              x2="348.858"
+              y2="104.372"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0" stop-color="#FFEA83" />
+              <stop offset="0.08" stop-color="#FFDD35" />
+              <stop offset="1" stop-color="#FFA800" />
+            </linearGradient>
+          </defs>
+        </svg>
+
+        <!-- Blue Glow -->
+        <div class="blue-glow" />
+
+        <!-- Pink Glow -->
+        <div class="pink-glow" />
+      </div>
+    </div>
+    <div class="feature__meta">
+      <div class="meta__title">柔軟なプラグインシステム</div>
+      <div class="meta__description">
+        Vite プラグインは、Rollup の適切に設計されたプラグインインターフェースを、Vite 固有の追加オプションで拡張します。
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-card {
+  @media (min-width: 768px) {
+    transform: translate3d(-60px, 0, 0);
+  }
+
+  .feature__meta {
+    max-width: 680px;
+  }
+
+  /* Extend height on smaller devices, to make room for text */
+  @media (max-width: 330px) {
+    height: 400px;
+  }
+}
+
+.feature__visualization {
+  .diagram {
+    width: fit-content;
+    position: absolute;
+    left: 50%;
+    transform-origin: center 40%;
+    transform: translate3d(-50%, 0, 0) scale(0.5);
+    margin-top: 0;
+
+    @media (min-width: 480px) {
+      transform-origin: center center;
+      transform: translate3d(-50%, 0, 0) scale(0.7);
+    }
+
+    @media (min-width: 630px) {
+      transform: translate3d(-50%, 0, 0) scale(1);
+      margin-top: 20px;
+    }
+
+    @media (min-width: 768px) {
+      transform: translate3d(-50%, 0, 0) scale(0.6);
+      margin-top: 0;
+    }
+
+    @media (min-width: 1000px) {
+      transform: translate3d(-50%, 0, 0) scale(0.8);
+      margin-top: 20px;
+    }
+
+    @media (min-width: 1200px) {
+      transform: translate3d(-50%, 0, 0) scale(1);
+    }
+  }
+
+  .blue-chip__cube,
+  .pink-chip__cube {
+    transition:
+      transform 0.5s ease-in-out,
+      filter 0.05s ease 0.45s;
+    will-change: filter, transform;
+
+    @media (min-width: 768px) {
+      transform: translate3d(0, -60px, 0);
+    }
+  }
+
+  .blue-chip__cube {
+    filter: grayscale(1) brightness(0.15)
+      drop-shadow(0 0 0rem color-mix(in srgb, #40cffd 0%, transparent));
+  }
+
+  .pink-chip__cube {
+    filter: grayscale(1) brightness(0.15)
+      drop-shadow(0 0 0rem color-mix(in srgb, #bc33fc 0%, transparent));
+  }
+
+  .vite-chip__logo {
+    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.2);
+    will-change: filter, transform;
+    filter: grayscale(1) brightness(0.4)
+      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
+    transform: translate3d(0, 0, 0);
+  }
+
+  .vite-chip__v {
+    filter: drop-shadow(0 0 0rem color-mix(in srgb, #93bfff 0%, transparent));
+    will-change: filter;
+    transition-delay: 0.8s;
+  }
+
+  .blue-chip__connection {
+    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+    will-change: clip-path;
+    filter: drop-shadow(
+      0 0 0.2rem color-mix(in srgb, #40cffd 50%, transparent)
+    );
+    transition: all 0.6s ease-in-out;
+  }
+
+  .pink-chip__connection {
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    will-change: clip-path;
+    filter: drop-shadow(
+      0 0 0.2rem color-mix(in srgb, #bc33fc 50%, transparent)
+    );
+    transition: all 0.6s ease-in-out;
+  }
+
+  .blue-glow {
+    position: absolute;
+    top: 50px;
+    left: 55px;
+    width: 100px;
+    height: 100px;
+    background: #41d1ff;
+    filter: blur(80px);
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.5s ease-out;
+    will-change: opacity;
+  }
+
+  .pink-glow {
+    position: absolute;
+    top: 50px;
+    right: 55px;
+    width: 100px;
+    height: 100px;
+    background: #bd34fe;
+    filter: blur(80px);
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.5s ease-out;
+    will-change: opacity;
+  }
+
+  &.active {
+    .blue-chip__cube,
+    .pink-chip__cube {
+      transform: translate3d(0px, 0, 0);
+    }
+
+    .blue-chip__cube {
+      filter: grayscale(0) brightness(1)
+        drop-shadow(0 0 0.5rem color-mix(in srgb, #40cffd 100%, transparent));
+    }
+
+    .pink-chip__cube {
+      filter: grayscale(0) brightness(1)
+        drop-shadow(0 0 0.5rem color-mix(in srgb, #bc33fc 100%, transparent));
+    }
+
+    .blue-chip__connection {
+      transition-delay: 0.3s;
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    }
+
+    .pink-chip__connection {
+      transition-delay: 0.3s;
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    }
+
+    .vite-chip__logo {
+      filter: grayscale(0) brightness(1)
+        drop-shadow(0px 20px 4px rgba(0, 0, 0, 0.4));
+      transform: translate3d(0, -20px, 0);
+      transition-delay: 0.8s;
+    }
+
+    .vite-chip__v {
+      filter: drop-shadow(
+        0 0 0.3rem color-mix(in srgb, #93bfff 20%, transparent)
+      );
+    }
+
+    .vite-chip__bolt {
+      filter: drop-shadow(
+        0 0 0.5rem color-mix(in srgb, yellow 20%, transparent)
+      );
+    }
+
+    .blue-glow {
+      opacity: 0.8;
+    }
+
+    .pink-glow {
+      opacity: 0.8;
+    }
+
+    &:hover {
+      .blue-glow {
+        opacity: 1;
+      }
+
+      .pink-glow {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureHMR.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureHMR.vue
new file mode 100644
index 00000000..f30c224c
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureHMR.vue	
@@ -0,0 +1,515 @@
+<script setup>
+import { ref } from 'vue'
+import { gsap } from 'gsap'
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+// Animation state
+const terminalActive = ref(false)
+const connectionsActive = ref(false)
+const browserActive = ref(false)
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#hmr-card')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { startAnimation } = useCardAnimation(
+  '#hmr-card',
+  () => {
+    // Define the timeline
+    const timeline = gsap.timeline()
+
+    // Animate in the components, one at a time
+    timeline.call(
+      () => {
+        terminalActive.value = true
+      },
+      null,
+      0,
+    )
+    timeline.call(
+      () => {
+        connectionsActive.value = true
+      },
+      null,
+      0.4,
+    )
+    timeline.call(
+      () => {
+        browserActive.value = true
+      },
+      null,
+      1,
+    )
+
+    // All done
+    return timeline
+  },
+  {
+    once: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="feature-card"
+    id="hmr-card"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization">
+      <!-- Terminal / IDE (left-side) -->
+      <div class="terminal" :class="{ active: terminalActive }">
+        <svg
+          class="terminal__line-numbers"
+          width="8"
+          height="125"
+          viewBox="0 0 8 121"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.06038 0.274872V10.2565H3.80614V1.63363L1.44697 3.06705L0.901974 2.17117L3.96292 0.274872H5.06038ZM7.21051 9.53237V10.5552H1.27526V9.53237H7.21051ZM3.50751 22.1106C4.15454 22.1106 4.70701 22.2351 5.1649 22.4839C5.62778 22.7328 5.98364 23.0737 6.2325 23.5067C6.48136 23.9397 6.60579 24.43 6.60579 24.9775C6.60579 25.4503 6.52367 25.9132 6.35942 26.3661C6.19517 26.814 5.93138 27.2869 5.56805 27.7846C5.2097 28.2773 4.73687 28.8248 4.14956 29.427C3.56724 30.0293 2.85053 30.7161 1.99944 31.4876H6.84469L6.68791 32.5552H0.573482V31.5324C1.34992 30.7908 2.00939 30.1413 2.5519 29.5838C3.09939 29.0264 3.54982 28.5386 3.9032 28.1205C4.26155 27.6975 4.54027 27.3142 4.73936 26.9708C4.94342 26.6274 5.08527 26.3014 5.1649 25.9928C5.24454 25.6792 5.28435 25.3557 5.28435 25.0223C5.28435 24.4449 5.12011 23.9895 4.79162 23.656C4.4681 23.3226 4.02016 23.1558 3.44779 23.1558C2.94012 23.1558 2.52452 23.2429 2.20101 23.4171C1.8775 23.5913 1.55398 23.87 1.23047 24.2533L0.364442 23.5814C0.772568 23.0837 1.22549 22.7154 1.7232 22.4764C2.22092 22.2326 2.81569 22.1106 3.50751 22.1106ZM3.49258 44.1106C4.13961 44.1106 4.69705 44.2276 5.1649 44.4615C5.63773 44.6905 6.00355 45.0015 6.26236 45.3947C6.52118 45.7829 6.65058 46.211 6.65058 46.6788C6.65058 47.0919 6.55851 47.4677 6.37435 47.8062C6.1902 48.1446 5.94632 48.4233 5.64271 48.6423C5.3391 48.8613 5.00563 49.0057 4.6423 49.0753C5.04545 49.1052 5.42371 49.2197 5.77709 49.4188C6.13047 49.6129 6.41914 49.8916 6.64312 50.2549C6.86709 50.6133 6.97907 51.0587 6.97907 51.5913C6.97907 52.1836 6.82976 52.7186 6.53113 53.1964C6.2325 53.6692 5.81442 54.0425 5.27689 54.3163C4.74433 54.59 4.12219 54.7269 3.41046 54.7269C2.83809 54.7269 2.26571 54.6174 1.69334 54.3984C1.12595 54.1794 0.645651 53.831 0.252456 53.3532L1.09608 52.6663C1.38973 53.0098 1.73814 53.2661 2.14128 53.4353C2.54941 53.6045 2.96251 53.6892 3.38059 53.6892C4.0973 53.6892 4.65723 53.5025 5.06038 53.1292C5.46353 52.751 5.66511 52.2383 5.66511 51.5913C5.66511 51.1035 5.57054 50.7178 5.38141 50.4341C5.19725 50.1504 4.94591 49.9488 4.62737 49.8294C4.30883 49.7049 3.9455 49.6427 3.53738 49.6427H2.67135L2.82813 48.6498H3.43285C3.76632 48.6498 4.07988 48.5876 4.37354 48.4631C4.67217 48.3337 4.91605 48.1347 5.10518 47.8659C5.29431 47.5971 5.38887 47.2612 5.38887 46.858C5.38887 46.2906 5.19974 45.8576 4.82148 45.559C4.44322 45.2603 3.98532 45.111 3.44779 45.111C2.99984 45.111 2.60914 45.1907 2.27567 45.3499C1.9422 45.5042 1.60624 45.7406 1.26779 46.0592L0.573482 45.2902C1.01147 44.8771 1.47683 44.5785 1.96957 44.3943C2.46231 44.2052 2.96998 44.1106 3.49258 44.1106ZM3.5747 66.1106L4.61991 66.5511L1.88745 73.0538H7.37476V74.0542H0.558551V73.1433L3.5747 66.1106ZM6.04586 70.1347V76.5552H4.83641L4.82895 73.2927L5.00066 70.1347H6.04586ZM6.7551 88.2749L6.56846 89.2753H2.50711V92.5154C2.82067 92.3462 3.11681 92.2317 3.39553 92.172C3.67922 92.1073 3.97536 92.0749 4.28395 92.0749C4.84139 92.0749 5.33164 92.2018 5.7547 92.4557C6.17775 92.7045 6.50625 93.0704 6.74017 93.5531C6.9741 94.0359 7.09106 94.6183 7.09106 95.3001C7.09106 95.982 6.94672 96.5817 6.65805 97.0994C6.37435 97.617 5.97369 98.0176 5.45607 98.3013C4.93844 98.585 4.32376 98.7269 3.61203 98.7269C2.99487 98.7269 2.4424 98.6174 1.95464 98.3984C1.47186 98.1794 1.03138 97.8758 0.633208 97.4876L1.40964 96.741C1.7232 97.0595 2.05916 97.2984 2.41752 97.4577C2.78085 97.612 3.184 97.6892 3.62696 97.6892C4.30386 97.6892 4.83143 97.4851 5.2097 97.077C5.58796 96.6639 5.77709 96.0591 5.77709 95.2628C5.77709 94.7103 5.69497 94.2748 5.53072 93.9563C5.36648 93.6378 5.14251 93.4113 4.85881 93.2769C4.58009 93.1375 4.26902 93.0679 3.92559 93.0679C3.62199 93.0679 3.35322 93.0977 3.11929 93.1575C2.88537 93.2122 2.61909 93.2968 2.32046 93.4113H1.31259V88.2749H6.7551ZM4.49299 110.111C4.89116 110.111 5.25698 110.163 5.59045 110.267C5.92392 110.367 6.23499 110.514 6.52366 110.708L6.03093 111.559C5.797 111.415 5.54814 111.308 5.28435 111.238C5.02554 111.163 4.75429 111.126 4.47059 111.126C3.9231 111.126 3.45774 111.31 3.0745 111.678C2.69126 112.042 2.40258 112.557 2.20848 113.224C2.01437 113.886 1.9198 114.665 1.92478 115.561L1.93971 116.046C1.93971 117.31 2.10644 118.238 2.43991 118.831C2.77338 119.418 3.31838 119.712 4.07491 119.712C4.72691 119.712 5.21467 119.48 5.53819 119.017C5.86668 118.554 6.03093 117.925 6.03093 117.128C6.03093 116.566 5.95378 116.123 5.79949 115.8C5.65018 115.471 5.43865 115.237 5.1649 115.098C4.89116 114.958 4.57262 114.889 4.20929 114.889C3.67674 114.889 3.20639 115.048 2.79827 115.366C2.39014 115.685 2.05916 116.093 1.80533 116.591L1.77546 115.486C2.11391 114.909 2.49964 114.493 2.93265 114.239C3.36566 113.985 3.85591 113.858 4.4034 113.858C4.93595 113.858 5.42123 113.975 5.85922 114.209C6.2972 114.443 6.64809 114.802 6.91188 115.284C7.18065 115.762 7.31503 116.367 7.31503 117.099C7.31503 117.855 7.17069 118.505 6.88202 119.047C6.59335 119.585 6.20264 120 5.7099 120.294C5.21716 120.583 4.67465 120.727 4.08237 120.727C3.45525 120.727 2.92519 120.61 2.49217 120.376C2.05916 120.137 1.70827 119.799 1.43951 119.361C1.17074 118.918 0.974143 118.388 0.849714 117.77C0.730262 117.148 0.670537 116.456 0.670537 115.695C0.670537 114.56 0.819851 113.575 1.11848 112.739C1.42209 111.902 1.85759 111.255 2.42498 110.797C2.99735 110.34 3.68669 110.111 4.49299 110.111Z"
+            fill="#808080"
+          />
+        </svg>
+        <svg
+          class="terminal__skeleton-lines"
+          width="198"
+          height="106"
+          viewBox="0 0 198 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0.920898 2.53252C0.920898 1.15812 2.03507 0.0439453 3.40947 0.0439453H102.952C104.327 0.0439453 105.441 1.15812 105.441 2.53252V12.4868C105.441 13.8612 104.327 14.9754 102.952 14.9754H3.40948C2.03507 14.9754 0.920898 13.8612 0.920898 12.4868V2.53252Z"
+          />
+          <path
+            d="M0.920898 24.9297C0.920898 23.5553 2.03507 22.4411 3.40947 22.4411H140.281C141.656 22.4411 142.77 23.5553 142.77 24.9297V34.884C142.77 36.2584 141.656 37.3726 140.281 37.3726H3.40948C2.03508 37.3726 0.920898 36.2584 0.920898 34.884V24.9297Z"
+          />
+          <path
+            d="M0.920898 47.3268C0.920898 45.9524 2.03507 44.8383 3.40947 44.8383H32.0281C33.4025 44.8383 34.5167 45.9524 34.5167 47.3268V57.2811C34.5167 58.6555 33.4025 59.7697 32.0281 59.7697H3.40948C2.03507 59.7697 0.920898 58.6555 0.920898 57.2811V47.3268Z"
+          />
+          <path
+            d="M0.920898 69.724C0.920898 68.3496 2.03507 67.2354 3.40947 67.2354H195.03C196.404 67.2354 197.518 68.3496 197.518 69.724V79.6783C197.518 81.0527 196.404 82.1669 195.03 82.1669H3.40948C2.03507 82.1669 0.920898 81.0527 0.920898 79.6783V69.724Z"
+          />
+          <path
+            d="M0.920898 92.9102C0.920898 91.5358 2.03507 90.4217 3.40947 90.4217H89.2653C90.6397 90.4217 91.7539 91.5358 91.7539 92.9102V102.865C91.7539 104.239 90.6397 105.353 89.2653 105.353H3.40947C2.03507 105.353 0.920898 104.239 0.920898 102.865V92.9102Z"
+          />
+        </svg>
+      </div>
+
+      <!-- Browser (right-side) -->
+      <svg
+        class="browser"
+        :class="{ active: browserActive }"
+        width="350"
+        height="223"
+        viewBox="0 0 348 223"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g class="browser__background" filter="url(#shadow)">
+          <rect
+            x="17"
+            y="-33"
+            width="442"
+            height="237"
+            rx="18"
+            fill="#242424"
+            fill-opacity="1"
+          />
+        </g>
+        <path
+          d="M46.4409 148.062C46.4409 146.436 47.759 145.118 49.385 145.118H156.845C158.471 145.118 159.789 146.436 159.789 148.062V198.112C159.789 199.738 158.471 201.056 156.845 201.056H49.385C47.759 201.056 46.4409 199.738 46.4409 198.112V148.062Z"
+          fill="url(#browser-bottom-left-square)"
+        />
+        <path
+          d="M181.869 148.062C181.869 146.436 183.188 145.118 184.814 145.118H292.273C293.899 145.118 295.217 146.436 295.217 148.062V198.112C295.217 199.738 293.899 201.056 292.273 201.056H184.814C183.188 201.056 181.869 199.738 181.869 198.112V148.062Z"
+          fill="url(#browser-bottom-middle-square)"
+        />
+        <path
+          d="M317.298 148.062C317.298 146.436 318.616 145.118 320.242 145.118H427.702C429.328 145.118 430.646 146.436 430.646 148.062V198.112C430.646 199.738 429.328 201.056 427.702 201.056H320.242C318.616 201.056 317.298 199.738 317.298 198.112V148.062Z"
+          fill="url(#browser-bottom-right-square)"
+        />
+        <path
+          class="browser__major-edge"
+          d="M46.4409 -7.97533C46.4409 -9.60131 47.759 -10.9194 49.385 -10.9194H427.702C429.328 -10.9194 430.646 -9.60132 430.646 -7.97533V74.4594C430.646 76.0854 429.328 77.4035 427.702 77.4035H49.385C47.759 77.4035 46.4409 76.0854 46.4409 74.4594V-7.97533Z"
+          fill="#575757"
+        />
+        <path
+          class="browser__heading-edge"
+          d="M134.764 95.0681C134.764 93.4422 136.082 92.124 137.708 92.124H339.379C341.005 92.124 342.323 93.4422 342.323 95.0681V100.956C342.323 102.582 341.005 103.9 339.379 103.9H137.708C136.082 103.9 134.764 102.582 134.764 100.956V95.0681Z"
+          fill="#575757"
+        />
+        <path
+          class="browser__tagline-edge"
+          d="M214.255 114.205C214.255 112.579 215.573 111.261 217.199 111.261H256.944C258.57 111.261 259.888 112.579 259.888 114.205V120.093C259.888 121.719 258.57 123.037 256.944 123.037H217.199C215.573 123.037 214.255 121.719 214.255 120.093V114.205Z"
+          fill="#575757"
+        />
+        <g filter="url(#browser-glow-filter)">
+          <path
+            class="browser__major-glow"
+            d="M46.4409 -7.97533C46.4409 -9.60131 47.759 -10.9194 49.385 -10.9194H427.702C429.328 -10.9194 430.646 -9.60132 430.646 -7.97533V74.4594C430.646 76.0854 429.328 77.4035 427.702 77.4035H49.385C47.759 77.4035 46.4409 76.0854 46.4409 74.4594V-7.97533Z"
+            fill="#575757"
+          />
+          <path
+            class="browser__heading-glow"
+            d="M134.764 95.0681C134.764 93.4422 136.082 92.124 137.708 92.124H339.379C341.005 92.124 342.323 93.4422 342.323 95.0681V100.956C342.323 102.582 341.005 103.9 339.379 103.9H137.708C136.082 103.9 134.764 102.582 134.764 100.956V95.0681Z"
+            fill="#575757"
+          />
+          <path
+            class="browser__tagline-glow"
+            d="M214.255 114.205C214.255 112.579 215.573 111.261 217.199 111.261H256.944C258.57 111.261 259.888 112.579 259.888 114.205V120.093C259.888 121.719 258.57 123.037 256.944 123.037H217.199C215.573 123.037 214.255 121.719 214.255 120.093V114.205Z"
+            fill="#575757"
+          />
+        </g>
+        <defs>
+          <filter id="shadow" x="-20%" y="0" width="140%" height="160%">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur" />
+            <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
+            <feComponentTransfer result="shadowOpacity">
+              <feFuncA type="linear" slope="0.6" />
+              <!-- Adjust the slope value to control opacity -->
+            </feComponentTransfer>
+            <feMerge>
+              <feMergeNode in="shadowOpacity" />
+              <!-- Use the result of feComponentTransfer -->
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+          <filter
+            id="browser-glow-filter"
+            x="24"
+            y="-33"
+            width="428"
+            height="178"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur stdDeviation="8" result="glow-effect" />
+          </filter>
+          <linearGradient
+            id="browser-bottom-left-square"
+            x1="238.543"
+            y1="145.118"
+            x2="238.543"
+            y2="201.056"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="#404040" />
+            <stop offset="1" stop-color="#404040" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="browser-bottom-middle-square"
+            x1="238.543"
+            y1="145.118"
+            x2="238.543"
+            y2="201.056"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="#404040" />
+            <stop offset="1" stop-color="#404040" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="browser-bottom-right-square"
+            x1="238.543"
+            y1="145.118"
+            x2="238.543"
+            y2="201.056"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="#404040" />
+            <stop offset="1" stop-color="#404040" stop-opacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <!-- Blue glow effect -->
+      <div class="corner-glow" />
+
+      <!-- Lines connecting the two sides  -->
+      <div class="connecting-lines" :class="{ active: connectionsActive }">
+        <div class="connecting-lines__line" />
+        <div class="connecting-lines__line" />
+        <div class="connecting-lines__line" />
+      </div>
+    </div>
+    <div class="feature__meta meta--center">
+      <div class="meta__title">超高速 HMR</div>
+      <div class="meta__description">
+        アプリのサイズに関わらず高速性を維持するホットモジュールリプレースメント（HMR）。
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-card {
+  @media (min-width: 768px) {
+    transform: translate3d(60px, 0, 0);
+  }
+
+  &:hover {
+    .corner-glow {
+      opacity: 1;
+    }
+  }
+
+  /* Extend height on smaller devices, to make room for text */
+  @media (max-width: 400px) {
+    height: 380px;
+  }
+}
+
+.feature__visualization {
+  --left-offset: calc(100% / 2);
+
+  @media (min-width: 480px) {
+    --left-offset: 140px;
+  }
+
+  @media (min-width: 900px) {
+    --left-offset: 100px;
+  }
+
+  @media (min-width: 1100px) {
+    --left-offset: 0px;
+  }
+
+  .terminal {
+    position: absolute;
+    top: 33px;
+    left: calc(32px - var(--left-offset));
+    width: 280px;
+    height: 160px;
+    border-radius: 12px;
+    background: #1e1e1e;
+    overflow: hidden;
+    border: 1px solid transparent;
+
+    .terminal__line-numbers {
+      position: absolute;
+      top: 16px;
+      left: 22px;
+    }
+
+    .terminal__skeleton-lines {
+      position: absolute;
+      top: 14px;
+      left: 45px;
+
+      path {
+        transition: all 0.3s ease;
+        fill: #525252;
+        opacity: 0.2;
+      }
+    }
+
+    &.active {
+      .terminal__skeleton-lines {
+        path {
+          opacity: 1;
+          fill: #41d1ff;
+
+          &:nth-child(2) {
+            transition-delay: 0.1s;
+            fill: #41d1ff;
+          }
+
+          &:nth-child(3) {
+            transition-delay: 0.2s;
+          }
+
+          &:nth-child(4) {
+            transition-delay: 0.3s;
+          }
+
+          &:nth-child(5) {
+            transition-delay: 0.4s;
+            fill: #c063ed;
+          }
+        }
+      }
+    }
+  }
+
+  .browser {
+    position: absolute;
+    top: 0;
+    left: calc(360px - var(--left-offset));
+    z-index: 2;
+
+    @media (min-width: 640px) and (max-width: 768px) {
+      left: unset;
+      right: 0;
+    }
+
+    @media (min-width: 1200px) {
+      left: unset;
+      right: 0;
+    }
+
+    * {
+      transition: all 0.5s ease;
+    }
+
+    /* Background */
+
+    .browser__background {
+      stroke: #2b2b2b;
+      stroke-width: 3px;
+    }
+
+    /* Major "Screen" of Browser */
+
+    .browser__major-glow,
+    .browser__major-edge {
+      fill: #41d1ff;
+      filter: grayscale(1) brightness(40%);
+    }
+
+    .browser__major-glow {
+      opacity: 0;
+    }
+
+    /* Heading */
+
+    .browser__heading-glow,
+    .browser__heading-edge {
+      fill: #41d1ff;
+      filter: grayscale(1) brightness(40%);
+    }
+
+    .browser__heading-glow {
+      opacity: 0;
+    }
+
+    /* Tagline */
+
+    .browser__tagline-glow,
+    .browser__tagline-edge {
+      fill: #c063ed;
+      filter: grayscale(1) brightness(60%);
+    }
+
+    .browser__tagline-glow {
+      opacity: 0;
+    }
+
+    &.active {
+      /* Major "Screen" of Browser */
+
+      .browser__major-glow,
+      .browser__major-edge {
+        filter: grayscale(0) brightness(100%);
+      }
+
+      .browser__major-glow {
+        opacity: 1;
+      }
+
+      /* Heading */
+
+      .browser__heading-glow,
+      .browser__heading-edge {
+        filter: grayscale(0) brightness(100%);
+        transition-delay: 0.2s;
+      }
+
+      .browser__heading-glow {
+        opacity: 1;
+      }
+
+      /* Tagline */
+
+      .browser__tagline-glow,
+      .browser__tagline-edge {
+        filter: grayscale(0) brightness(100%);
+        transition-delay: 0.3s;
+      }
+
+      .browser__tagline-glow {
+        opacity: 1;
+      }
+    }
+  }
+
+  .corner-glow {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 140px;
+    background: #41d1ff;
+    filter: blur(140px);
+    z-index: -1;
+    transform: translate3d(20px, 0, 0);
+    opacity: 0.5;
+    transition: opacity 1s ease-out;
+    will-change: opacity;
+  }
+
+  .connecting-lines {
+    &.active {
+      .connecting-lines__line {
+        transform: translate3d(0, 0, 0) scaleX(1);
+      }
+    }
+  }
+
+  .connecting-lines__line {
+    height: 2px;
+    border-radius: 1px;
+    background: linear-gradient(to left, #41d1ff, #41d1ff00);
+    position: absolute;
+    width: calc(var(--base-width) - 35px);
+    transform-origin: left center;
+    transition: all 0.6s ease;
+    transform: translate3d(0, 0, 0) scaleX(0);
+
+    @media (min-width: 640px) and (max-width: 768px) {
+      width: calc(
+        (var(--base-width) - var(--left-offset)) + (100% - 350px) - 115px
+      );
+    }
+
+    @media (min-width: 1200px) {
+      width: var(--base-width);
+    }
+
+    &:nth-child(1) {
+      --base-width: 225px;
+      top: 54px;
+      left: calc(185px - var(--left-offset));
+    }
+
+    &:nth-child(2) {
+      --base-width: 190px;
+      background: linear-gradient(to right, transparent, #7e5dee);
+      top: 76px;
+      left: calc(220px - var(--left-offset));
+      transition-delay: 0.3s;
+    }
+
+    &:nth-child(3) {
+      --base-width: 240px;
+      background: linear-gradient(to right, #bd34fe00, #c063ed);
+      top: 145px;
+      left: calc(170px - var(--left-offset));
+      transition-delay: 0.4s;
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue
new file mode 100644
index 00000000..b37ecb2a
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue	
@@ -0,0 +1,425 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+import { gsap } from 'gsap'
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+// Animation state
+const commandTriggered = ref(false)
+const highlightEnter = ref(true)
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#instant-server-start-card')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { startAnimation } = useCardAnimation(
+  '#instant-server-start-card',
+  () => {
+    const timeline = gsap.timeline()
+
+    // Execute the `npm run dev` command
+    timeline.call(() => {
+      commandTriggered.value = true
+      highlightEnter.value = false
+    })
+  },
+  {
+    once: true,
+  },
+)
+
+/**
+ * Run the command animation on enter press
+ */
+function handleEnterPress(event) {
+  if (event.key === 'Enter') {
+    startAnimation()
+    window.removeEventListener('keydown', handleEnterPress)
+  }
+}
+
+/**
+ * Listen for enter key presses
+ */
+onMounted(() => {
+  window.addEventListener('keydown', handleEnterPress)
+})
+
+/**
+ * Clean up when unmounting the component.
+ */
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleEnterPress)
+})
+</script>
+
+<template>
+  <div
+    id="instant-server-start-card"
+    class="feature-card"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization">
+      <div class="terminal" :class="{ 'terminal--active': commandTriggered }">
+        <div class="terminal__skeleton-line" />
+        <div class="terminal__skeleton-line" />
+        <Transition name="command-transition">
+          <svg
+            class="terminal__command"
+            width="110"
+            height="15"
+            viewBox="0 0 110 15"
+            v-show="!commandTriggered"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.253655 10.368L5.48951 7.40346V7.28547L0.253655 4.32095V3.06729L6.59567 6.73976V7.91967L0.253655 11.5921V10.368ZM17.5426 11.8281V4.2177H18.7225V5.45661H18.7815C18.8601 5.26979 18.9585 5.0928 19.0765 4.92565C19.1944 4.74866 19.337 4.59626 19.5042 4.46843C19.6812 4.34061 19.8876 4.23737 20.1236 4.15871C20.3596 4.08005 20.6349 4.04072 20.9496 4.04072C21.746 4.04072 22.3851 4.29636 22.8669 4.80766C23.3487 5.30912 23.5896 6.02198 23.5896 6.94625V11.8281H22.4097V7.15273C22.4097 6.45462 22.2573 5.93841 21.9525 5.6041C21.6477 5.25996 21.2003 5.08789 20.6103 5.08789C20.3744 5.08789 20.1433 5.11738 19.9171 5.17638C19.691 5.23538 19.4894 5.32387 19.3124 5.44186C19.1354 5.55985 18.9929 5.71226 18.8847 5.89908C18.7766 6.08589 18.7225 6.30221 18.7225 6.54803V11.8281H17.5426ZM26.0469 4.2177H27.2268V5.45661H27.2858C27.7774 4.51268 28.5591 4.04072 29.6309 4.04072C30.565 4.04072 31.2926 4.38977 31.8137 5.08789C32.3447 5.786 32.6102 6.76434 32.6102 8.02291C32.6102 9.28148 32.3447 10.2598 31.8137 10.9579C31.2926 11.6561 30.565 12.0051 29.6309 12.0051C28.5591 12.0051 27.7774 11.5331 27.2858 10.5892H27.2268V14.7779H26.0469V4.2177ZM29.1737 10.9579C29.862 10.9579 30.3929 10.7515 30.7666 10.3385C31.15 9.91569 31.3418 9.36015 31.3418 8.67186V7.37396C31.3418 6.68568 31.15 6.13506 30.7666 5.72209C30.3929 5.29929 29.862 5.08789 29.1737 5.08789C28.9082 5.08789 28.6575 5.1223 28.4215 5.19113C28.1855 5.25996 27.979 5.3632 27.802 5.50086C27.625 5.62868 27.4825 5.79092 27.3743 5.98757C27.276 6.17439 27.2268 6.39562 27.2268 6.65127V9.39456C27.2268 9.65021 27.276 9.87636 27.3743 10.073C27.4825 10.2598 27.625 10.4221 27.802 10.5597C27.979 10.6875 28.1855 10.7859 28.4215 10.8547C28.6575 10.9235 28.9082 10.9579 29.1737 10.9579ZM33.9908 11.8281V4.2177H35.0822V5.10264H35.1412C35.2592 4.80766 35.4264 4.55693 35.6427 4.35044C35.859 4.14396 36.1785 4.04072 36.6013 4.04072C37.0438 4.04072 37.3732 4.15379 37.5895 4.37994C37.8058 4.59626 37.9386 4.8814 37.9877 5.23538H38.032C38.1696 4.89124 38.3663 4.60609 38.6219 4.37994C38.8776 4.15379 39.2316 4.04072 39.6839 4.04072C40.3033 4.04072 40.7163 4.25703 40.9228 4.68967C41.1391 5.1223 41.2472 5.74175 41.2472 6.54803V11.8281H40.1558V6.73976C40.1558 6.09081 40.087 5.64343 39.9493 5.39761C39.8215 5.14197 39.5806 5.01414 39.2266 5.01414C38.912 5.01414 38.6564 5.11738 38.4597 5.32387C38.2631 5.52052 38.1647 5.82533 38.1647 6.2383V11.8281H37.0733V6.73976C37.0733 6.09081 37.0045 5.64343 36.8668 5.39761C36.739 5.14197 36.503 5.01414 36.1589 5.01414C35.8442 5.01414 35.5837 5.11738 35.3772 5.32387C35.1805 5.52052 35.0822 5.82533 35.0822 6.2383V11.8281H33.9908ZM51.4272 10.8252H53.6543V5.22063H51.4272V4.2177H54.8342V6.13506H54.9079C55.0653 5.53527 55.3602 5.06822 55.7929 4.73391C56.2353 4.38977 56.7958 4.2177 57.4742 4.2177H58.5362V5.39761H57.1055C56.4271 5.39761 55.8764 5.59426 55.4536 5.98757C55.0407 6.38087 54.8342 6.89708 54.8342 7.5362V10.8252H57.784V11.8281H51.4272V10.8252ZM65.0641 10.5892H65.0052C64.9265 10.776 64.8282 10.9579 64.7102 11.1349C64.5922 11.3021 64.4447 11.4496 64.2677 11.5774C64.1006 11.7052 63.899 11.8085 63.663 11.8871C63.427 11.9658 63.1517 12.0051 62.8371 12.0051C62.0406 12.0051 61.4015 11.7544 60.9197 11.2529C60.4379 10.7416 60.197 10.0238 60.197 9.09958V4.2177H61.3769V8.8931C61.3769 9.59121 61.5293 10.1123 61.8341 10.4565C62.139 10.7908 62.5863 10.9579 63.1763 10.9579C63.4123 10.9579 63.6433 10.9284 63.8695 10.8694C64.0956 10.8105 64.2972 10.722 64.4742 10.604C64.6512 10.486 64.7937 10.3385 64.9019 10.1615C65.0101 9.97468 65.0641 9.75345 65.0641 9.4978V4.2177H66.2441V11.8281H65.0641V10.5892ZM68.8341 11.8281V4.2177H70.014V5.45661H70.073C70.1517 5.26979 70.25 5.0928 70.368 4.92565C70.486 4.74866 70.6285 4.59626 70.7957 4.46843C70.9727 4.34061 71.1792 4.23737 71.4152 4.15871C71.6511 4.08005 71.9264 4.04072 72.2411 4.04072C73.0375 4.04072 73.6766 4.29636 74.1584 4.80766C74.6402 5.30912 74.8811 6.02198 74.8811 6.94625V11.8281H73.7012V7.15273C73.7012 6.45462 73.5488 5.93841 73.244 5.6041C72.9392 5.25996 72.4918 5.08789 71.9019 5.08789C71.6659 5.08789 71.4348 5.11738 71.2087 5.17638C70.9825 5.23538 70.781 5.32387 70.604 5.44186C70.427 5.55985 70.2844 5.71226 70.1762 5.89908C70.0681 6.08589 70.014 6.30221 70.014 6.54803V11.8281H68.8341ZM90.7542 10.5892H90.6952C90.2035 11.5331 89.4218 12.0051 88.3501 12.0051C87.416 12.0051 86.6835 11.6561 86.1525 10.9579C85.6314 10.2598 85.3708 9.28148 85.3708 8.02291C85.3708 6.76434 85.6314 5.786 86.1525 5.08789C86.6835 4.38977 87.416 4.04072 88.3501 4.04072C89.4218 4.04072 90.2035 4.51268 90.6952 5.45661H90.7542V0.913954H91.9341V11.8281H90.7542V10.5892ZM88.8073 10.9579C89.0728 10.9579 89.3235 10.9235 89.5595 10.8547C89.7955 10.7859 90.002 10.6875 90.179 10.5597C90.3559 10.4221 90.4936 10.2598 90.5919 10.073C90.7001 9.87636 90.7542 9.65021 90.7542 9.39456V6.65127C90.7542 6.39562 90.7001 6.17439 90.5919 5.98757C90.4936 5.79092 90.3559 5.62868 90.179 5.50086C90.002 5.3632 89.7955 5.25996 89.5595 5.19113C89.3235 5.1223 89.0728 5.08789 88.8073 5.08789C88.119 5.08789 87.5832 5.29929 87.1997 5.72209C86.826 6.13506 86.6392 6.68568 86.6392 7.37396V8.67186C86.6392 9.36015 86.826 9.91569 87.1997 10.3385C87.5832 10.7515 88.119 10.9579 88.8073 10.9579ZM97.5919 12.0051C97.0412 12.0051 96.5447 11.9117 96.1022 11.7249C95.6696 11.5381 95.296 11.2726 94.9813 10.9284C94.6765 10.5745 94.4405 10.1566 94.2734 9.67479C94.1062 9.18316 94.0226 8.63745 94.0226 8.03766C94.0226 7.42804 94.1062 6.87742 94.2734 6.38579C94.4504 5.89416 94.6913 5.47627 94.9961 5.13213C95.3009 4.77816 95.6647 4.50776 96.0875 4.32095C96.5201 4.13413 96.997 4.04072 97.5181 4.04072C98.0294 4.04072 98.4916 4.13413 98.9045 4.32095C99.3273 4.50776 99.6862 4.76833 99.9812 5.10264C100.276 5.42711 100.502 5.8155 100.66 6.2678C100.817 6.7201 100.896 7.21664 100.896 7.75743V8.31789H95.2616V8.67186C95.2616 9.00617 95.3156 9.3159 95.4238 9.60104C95.5319 9.88619 95.6844 10.132 95.881 10.3385C96.0875 10.545 96.3333 10.7072 96.6184 10.8252C96.9134 10.9334 97.2379 10.9874 97.5919 10.9874C98.1032 10.9874 98.5456 10.8694 98.9193 10.6335C99.2929 10.3975 99.5781 10.073 99.7747 9.66004L100.645 10.25C100.419 10.7613 100.04 11.1841 99.5092 11.5184C98.9881 11.8429 98.349 12.0051 97.5919 12.0051ZM97.5181 5.01414C97.1937 5.01414 96.8938 5.07314 96.6184 5.19113C96.3431 5.30912 96.1022 5.47136 95.8958 5.67784C95.6991 5.88433 95.5418 6.13014 95.4238 6.41529C95.3156 6.6906 95.2616 6.99541 95.2616 7.32972V7.43296H99.6272V7.27072C99.6272 6.93641 99.5731 6.6316 99.465 6.35629C99.3667 6.08098 99.2241 5.845 99.0373 5.64834C98.8603 5.44186 98.639 5.28454 98.3736 5.17638C98.1179 5.06822 97.8328 5.01414 97.5181 5.01414ZM105.256 11.8281L102.527 4.2177H103.722L104.813 7.40346L105.993 10.84H106.052L107.232 7.40346L108.323 4.2177H109.488L106.76 11.8281H105.256Z"
+              fill="white"
+            />
+          </svg>
+        </Transition>
+        <Transition name="command-transition">
+          <svg
+            class="terminal__enter"
+            width="28"
+            height="28"
+            viewBox="0 0 28 28"
+            v-show="!commandTriggered"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              width="28"
+              height="28"
+              rx="4"
+              fill="url(#paint0_linear_693_14840)"
+            />
+            <rect
+              width="28"
+              height="28"
+              rx="4"
+              fill="url(#paint1_linear_693_14840)"
+            />
+            <rect
+              x="0.5"
+              y="0.5"
+              width="27"
+              height="27"
+              rx="3.92105"
+              stroke="white"
+              stroke-opacity="0.1"
+            />
+            <g filter="url(#filter0_f_693_14840)">
+              <path
+                d="M19.9999 8V14.75C19.9999 15.5456 19.6839 16.3087 19.1213 16.8713C18.5586 17.4339 17.7956 17.75 16.9999 17.75H10.1854L12.0604 19.625L10.9999 20.6855L7.31445 17L10.9999 13.3145L12.0604 14.375L10.1854 16.25H16.9999C17.3978 16.25 17.7793 16.092 18.0606 15.8106C18.3419 15.5293 18.4999 15.1478 18.4999 14.75V8H19.9999Z"
+                fill="#FAFAFA"
+              />
+            </g>
+            <path
+              d="M19.9999 8V14.75C19.9999 15.5456 19.6839 16.3087 19.1213 16.8713C18.5586 17.4339 17.7956 17.75 16.9999 17.75H10.1854L12.0604 19.625L10.9999 20.6855L7.31445 17L10.9999 13.3145L12.0604 14.375L10.1854 16.25H16.9999C17.3978 16.25 17.7793 16.092 18.0606 15.8106C18.3419 15.5293 18.4999 15.1478 18.4999 14.75V8H19.9999Z"
+              fill="#FAFAFA"
+            />
+            <defs>
+              <filter
+                id="filter0_f_693_14840"
+                x="1.31445"
+                y="2"
+                width="24.6855"
+                height="24.6855"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB"
+              >
+                <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                <feBlend
+                  mode="normal"
+                  in="SourceGraphic"
+                  in2="BackgroundImageFix"
+                  result="shape"
+                />
+                <feGaussianBlur
+                  stdDeviation="3"
+                  result="effect1_foregroundBlur_693_14840"
+                />
+              </filter>
+              <linearGradient
+                id="paint0_linear_693_14840"
+                x1="14"
+                y1="0"
+                x2="14"
+                y2="28"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stop-color="#404040" />
+                <stop offset="1" stop-color="#262626" />
+              </linearGradient>
+              <linearGradient
+                id="paint1_linear_693_14840"
+                x1="14"
+                y1="0"
+                x2="14"
+                y2="28"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0" stop-color="#404040" />
+                <stop offset="1" stop-color="#262626" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </Transition>
+        <div class="terminal__enter-pulse" v-show="highlightEnter" />
+        <Transition name="ready-label-transition">
+          <span class="terminal__ready-label" v-if="commandTriggered"
+            >Ready in 96ms</span
+          >
+        </Transition>
+        <div class="terminal__glow" />
+      </div>
+      <div class="connection-line" :class="{ active: commandTriggered }" />
+    </div>
+    <div class="feature__meta">
+      <div class="meta__title">即時サーバー起動</div>
+      <div class="meta__description">
+        ネイティブ ESM でのオンデマンドファイル配信、バンドルは不要！
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-card {
+  perspective: 100px;
+
+  @media (min-width: 768px) {
+    transform: translate3d(-60px, 0, 0);
+  }
+
+  /* Extend height on smaller devices, to make room for text */
+  @media (max-width: 420px) {
+    height: 400px;
+  }
+
+  /* Or for really small screen */
+  @media (max-width: 340px) {
+    height: 420px;
+  }
+
+  .feature__meta {
+    max-width: calc(100% - 30px);
+  }
+}
+
+.feature__visualization {
+  .terminal {
+    position: absolute;
+    top: 33px;
+    left: 32px;
+    right: 0;
+    height: 170px;
+    border-radius: 12px 0 0 12px;
+    background: #171717;
+    overflow: hidden;
+    transition: all 0.4s ease-in-out;
+    border: 1px solid transparent;
+    border-right: none;
+
+    .command-transition-enter-active,
+    .command-transition-leave-active,
+    .ready-label-transition-enter-active,
+    .ready-label-transition-leave-active {
+      transition: all 0.4s ease;
+    }
+
+    .command-transition-enter-active {
+      transition: all 1s ease;
+      transition-delay: 0.5s;
+    }
+
+    .ready-label-transition-enter-active {
+      transition-delay: 0.2s;
+    }
+
+    .ready-label-transition-leave-active {
+      transition: all 0.6s ease;
+    }
+
+    .command-transition-enter-from,
+    .command-transition-leave-to {
+      opacity: 0;
+    }
+
+    .ready-label-transition-enter-from,
+    .ready-label-transition-leave-to {
+      transform: translate3d(0, -20px, 0);
+      opacity: 0;
+    }
+
+    * {
+      user-select: none;
+    }
+
+    .terminal__skeleton-line {
+      height: 10px;
+      border-radius: 20px;
+      opacity: 0.6;
+      background: #404040;
+      position: absolute;
+      left: 32px;
+
+      &:nth-child(1) {
+        top: 33px;
+        width: 45%;
+        max-width: 170px;
+      }
+
+      &:nth-child(2) {
+        top: 64px;
+        width: 60%;
+        max-width: 230px;
+      }
+    }
+
+    .terminal__command {
+      position: absolute;
+      left: 32px;
+      top: 100px;
+      margin-bottom: 0;
+      border-right: 1px solid white;
+      animation: cursor-blink 1s linear infinite;
+    }
+
+    .terminal__enter {
+      position: absolute;
+      top: 93px;
+      left: 165px;
+      border-radius: 2px;
+    }
+
+    .terminal__enter-pulse {
+      width: 28px;
+      height: 28px;
+      position: absolute;
+      top: 93px;
+      left: 165px;
+      border-radius: 5px;
+      pointer-events: none;
+      border: 1px solid white;
+      opacity: 0;
+      box-shadow: 0 0 5px 0 rgb(255, 255, 255);
+      animation: enter-pulse 4s ease-out infinite;
+    }
+
+    .terminal__ready-label {
+      font-family: Inter, sans-serif;
+      font-size: 22px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      letter-spacing: -0.4px;
+      background: linear-gradient(
+        to left,
+        #13b351 0%,
+        rgba(19, 179, 81, 0.7) 120%
+      );
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: absolute;
+      left: 32px;
+      top: 110px;
+      pointer-events: none;
+    }
+
+    .terminal__glow {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      border-radius: 12px 0 0 12px;
+      background: url('/noise.png'),
+        radial-gradient(
+          ellipse 140% 80% at 96% bottom,
+          #13b351 0%,
+          transparent 50%
+        );
+      filter: blur(15px);
+      opacity: 0;
+      pointer-events: none;
+      will-change: opacity, transform;
+      transition: all 2s ease-in-out;
+
+      @media (min-width: 768px) {
+        transform: translate3d(60px, 0, 0);
+      }
+    }
+
+    &.terminal--active {
+      border: 1px solid #13b351;
+      border-right: none;
+      box-shadow: 0 0 11px 0 rgba(19, 179, 81, 0.3);
+      transition-delay: 0.2s;
+
+      .terminal__glow {
+        transition: all 0.6s ease-in-out;
+        transform: translate3d(0, 20px, 0);
+        opacity: 1;
+      }
+    }
+  }
+
+  .connection-line {
+    position: absolute;
+    top: 203px;
+    right: 40px;
+    width: 1px;
+    height: calc(100% - 170px - 33px);
+    background: url('/noise.png'), #13b351;
+    box-shadow: 0 0 10px 0 #13b351;
+    transition: all 0.5s ease-in;
+    will-change: transform, opacity;
+    opacity: 0.5;
+    transform-origin: center bottom;
+    transform: scaleY(0);
+    visibility: hidden;
+
+    &.active {
+      transition: all 0.3s ease-out;
+      visibility: visible;
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
+}
+
+@keyframes enter-pulse {
+  0% {
+    transform: scale(1) translate3d(0, 0, 0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.6) translate3d(0, 0, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes cursor-blink {
+  0% {
+    border-color: transparent;
+  }
+  49% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: #ffffff;
+  }
+  100% {
+    border-color: #ffffff;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue
new file mode 100644
index 00000000..d7e1c0ee
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue	
@@ -0,0 +1,623 @@
+<script setup lang="ts">
+import SvgNode from '../common/SvgNode.vue'
+import { ref, Ref } from 'vue'
+import { gsap } from 'gsap'
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+// Animation state
+const isBoltActive: Ref<boolean> = ref(false)
+const nodes = Array.from({ length: 10 }, () => {
+  return {
+    position: ref(0),
+    visible: ref(false),
+  }
+})
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#optimized-build-card')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { startAnimation } = useCardAnimation(
+  '#optimized-build-card',
+  () => {
+    // Define the timeline
+    const timeline = gsap.timeline()
+
+    // Animate in each node
+    nodes.forEach((node, i) => {
+      let subTimeline = gsap.timeline()
+      subTimeline.call(() => {
+        node.visible.value = true
+      })
+      subTimeline.to(node.position, {
+        value: 1,
+        duration: 0.8,
+        ease: 'power3.out',
+      })
+      subTimeline.call(
+        () => {
+          node.visible.value = false
+        },
+        null,
+        '-=0.6',
+      )
+      timeline.add(subTimeline, Math.random())
+    })
+
+    // Animate in the bolt
+    timeline.call(
+      () => {
+        isBoltActive.value = true
+      },
+      null,
+      '-=0.5',
+    )
+
+    // All done
+    return timeline
+  },
+  {
+    once: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="feature-card"
+    id="optimized-build-card"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization">
+      <!-- Left-side lines/nodes -->
+      <svg
+        class="left-lines"
+        width="195"
+        height="138"
+        viewBox="0 0 195 138"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M195 31.5L89.8055 30.377C76.1575 30.377 62.535 29.076 49.0906 26.4886L-21 13"
+          stroke="url(#ob-linear-gradient-left)"
+        />
+
+        <SvgNode
+          path="M195 31.5L89.8055 30.377C76.1575 30.377 62.535 29.076 49.0906 26.4886L-21 13"
+          :position="nodes[0].position.value"
+          :visible="nodes[0].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M195 50L69.295 47.754L-21 41.016"
+          stroke="url(#ob-linear-gradient-left)"
+        />
+
+        <SvgNode
+          path="M195 50L69.295 47.754L-21 41.016"
+          :position="nodes[1].position.value"
+          :visible="nodes[1].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M195 68.5L-21 69.5642"
+          stroke="url(#ob-linear-gradient-left)"
+        />
+
+        <SvgNode
+          path="M195 68.5L-21 69.5642"
+          :position="nodes[2].position.value"
+          :visible="nodes[2].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M195 87L69.2951 89.2463L-21 96.1614"
+          stroke="url(#ob-linear-gradient-left)"
+        />
+
+        <SvgNode
+          path="M195 87L69.2951 89.2463L-21 96.1614"
+          :position="nodes[3].position.value"
+          :visible="nodes[3].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M195 105.5L89.8055 106.623C76.1575 106.623 62.535 107.924 49.0906 110.511L-21 124"
+          stroke="url(#ob-linear-gradient-left)"
+        />
+
+        <SvgNode
+          path="M195 105.5L89.8055 106.623C76.1575 106.623 62.535 107.924 49.0906 110.511L-21 124"
+          :position="nodes[4].position.value"
+          :visible="nodes[4].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <defs>
+          <linearGradient
+            id="ob-linear-gradient-left"
+            x1="-453.247"
+            y1="167.386"
+            x2="196.189"
+            y2="125.855"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="white" stop-opacity="0" />
+            <stop offset="0.7" stop-color="white" stop-opacity="0.2" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <!-- Right-side lines/nodes -->
+      <svg
+        class="right-lines"
+        width="203"
+        height="113"
+        viewBox="0 0 203 113"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 93.5L105.194 94.623C118.843 94.623 132.465 95.924 145.909 98.5114L216 112"
+          stroke="url(#ob-linear-gradient-right)"
+        />
+
+        <SvgNode
+          path="M0 93.5L105.194 94.623C118.843 94.623 132.465 95.924 145.909 98.5114L216 112"
+          :position="nodes[5].position.value"
+          :visible="nodes[5].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M0 75L125.705 77.246L216 83.984"
+          stroke="url(#ob-linear-gradient-right)"
+        />
+
+        <SvgNode
+          path="M0 75L125.705 77.246L216 83.984"
+          :position="nodes[6].position.value"
+          :visible="nodes[6].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M4.65162e-08 56.5L216 55.4358"
+          stroke="url(#ob-linear-gradient-right)"
+        />
+
+        <SvgNode
+          path="M4.65162e-08 56.5L216 55.4358"
+          :position="nodes[7].position.value"
+          :visible="nodes[7].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M4.00455e-07 38L125.705 35.7537L216 28.8386"
+          stroke="url(#ob-linear-gradient-right)"
+        />
+
+        <SvgNode
+          path="M4.00455e-07 38L125.705 35.7537L216 28.8386"
+          :position="nodes[8].position.value"
+          :visible="nodes[8].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <path
+          d="M8.0866e-07 19.5L105.194 18.377C118.843 18.377 132.465 17.076 145.909 14.4887L216 1"
+          stroke="url(#ob-linear-gradient-right)"
+        />
+
+        <SvgNode
+          path="M8.0866e-07 19.5L105.194 18.377C118.843 18.377 132.465 17.076 145.909 14.4887L216 1"
+          :position="nodes[9].position.value"
+          :visible="nodes[9].visible.value"
+          :dot-color="false"
+          glow-color="#FFE358"
+        />
+
+        <defs>
+          <linearGradient
+            id="ob-linear-gradient-right"
+            x1="648.247"
+            y1="-42.3859"
+            x2="-1.18927"
+            y2="-0.855247"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="white" stop-opacity="0" />
+            <stop offset="0.7" stop-color="white" stop-opacity="0.2" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <!-- Lightning Bolt -->
+      <svg
+        class="bolt"
+        :class="{ active: isBoltActive }"
+        width="180"
+        height="263"
+        viewBox="0 0 180 263"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter-bolt-glow)" class="bolt__glow">
+          <path
+            d="M111.597 57.0439L61.562 69.1637C60.7396 69.3629 60.1308 70.2245 60.0812 71.2584L57.0033 135.519C56.9309 137.032 58.0553 138.207 59.2503 137.866L73.1807 133.892C74.4841 133.521 75.6618 134.94 75.3939 136.56L71.2552 161.613C70.9767 163.3 72.2573 164.741 73.5893 164.241L82.1934 161.01C83.5273 160.509 84.8089 161.955 84.5267 163.643L77.9496 202.996C77.538 205.458 80.1867 206.8 81.2913 204.689L82.0291 203.28L122.8 102.695C123.483 101.011 122.306 99.0908 120.809 99.4478L106.47 102.869C105.123 103.19 103.976 101.639 104.357 100.009L113.715 59.9023C114.096 58.2698 112.946 56.7172 111.597 57.0439Z"
+            fill="url(#paint0_radial_693_18989)"
+          />
+        </g>
+        <g filter="url(#filter-bolt-edge-glow)" class="bolt__glow">
+          <path
+            d="M111.597 57.0361L61.562 67.0126C60.7396 67.1765 60.1308 67.8857 60.0812 68.7368L57.0033 121.633C56.9309 122.879 58.0553 123.846 59.2503 123.565L73.1807 120.294C74.4841 119.988 75.6618 121.156 75.3939 122.49L71.2552 143.113C70.9767 144.501 72.2573 145.688 73.5893 145.276L82.1934 142.616C83.5273 142.204 84.8089 143.394 84.5267 144.783L77.9496 177.177C77.538 179.203 80.1867 180.308 81.2913 178.571L82.0291 177.41L122.8 94.6142C123.483 93.2278 122.306 91.6471 120.809 91.9409L106.47 94.757C105.123 95.0214 103.976 93.7444 104.357 92.4029L113.715 59.389C114.096 58.0452 112.946 56.7672 111.597 57.0361Z"
+            stroke="url(#paint1_radial_693_18989)"
+            stroke-width="3.34777"
+          />
+        </g>
+
+        <mask
+          id="bolt-mask"
+          style="mask-type: alpha"
+          maskUnits="userSpaceOnUse"
+          x="56"
+          y="56"
+          width="68"
+          height="124"
+        >
+          <path
+            d="M111.597 57.0361L61.562 67.0126C60.7396 67.1765 60.1308 67.8857 60.0812 68.7368L57.0033 121.633C56.9309 122.879 58.0553 123.846 59.2503 123.565L73.1807 120.294C74.4841 119.988 75.6618 121.156 75.3939 122.49L71.2552 143.113C70.9767 144.501 72.2573 145.688 73.5893 145.276L82.1934 142.616C83.5273 142.204 84.8089 143.394 84.5267 144.783L77.9496 177.177C77.538 179.203 80.1867 180.308 81.2913 178.571L82.0291 177.41L122.8 94.6142C123.483 93.2278 122.306 91.6471 120.809 91.9409L106.47 94.757C105.123 95.0214 103.976 93.7444 104.357 92.4029L113.715 59.389C114.096 58.0452 112.946 56.7672 111.597 57.0361Z"
+            fill="url(#linear-mask)"
+          />
+          <path
+            d="M59.8424 68.7229L59.8424 68.7229L56.7646 121.619L57.0033 121.633L56.7646 121.619C56.6833 123.019 57.9486 124.116 59.305 123.798L73.2353 120.527C74.3622 120.262 75.3945 121.273 75.1595 122.443L75.3939 122.49L75.1595 122.443L71.0208 143.066C70.7081 144.624 72.147 145.972 73.6599 145.504L73.5893 145.276L73.6599 145.504L82.264 142.844C83.4168 142.488 84.54 143.516 84.2924 144.735L84.5267 144.783L84.2924 144.735L77.7152 177.129C77.255 179.395 80.235 180.678 81.4931 178.699L82.2309 177.539L82.2379 177.528L82.2436 177.516L123.015 94.7198C123.781 93.1646 122.463 91.3725 120.763 91.7063L106.424 94.5223C106.424 94.5223 106.424 94.5224 106.424 94.5224C105.259 94.7509 104.253 93.6453 104.587 92.4681L113.946 59.4542L113.946 59.4542C114.373 57.9459 113.082 56.4962 111.55 56.8016L111.597 57.0361L111.55 56.8016L61.5153 66.7781C60.5836 66.9638 59.8982 67.7658 59.8424 68.7229Z"
+            stroke="white"
+            stroke-opacity="0.3"
+            stroke-width="0.478253"
+          />
+        </mask>
+        <g mask="url(#bolt-mask)">
+          <rect
+            class="bolt__dark"
+            x="41.2188"
+            y="57"
+            width="92.7811"
+            height="136.78"
+            fill="#1E1E1E"
+          />
+          <rect
+            class="bolt__color"
+            x="41.2188"
+            y="57"
+            width="92.7811"
+            height="136.78"
+            fill="url(#radial-bolt-color)"
+          />
+          <rect
+            class="bolt__highlight"
+            x="41.2188"
+            y="57"
+            width="92.7811"
+            height="136.78"
+            fill="white"
+          />
+          <path
+            class="bolt__edge"
+            d="M111.597 57.0361L61.562 67.0126C60.7396 67.1765 60.1308 67.8857 60.0812 68.7368L57.0033 121.633C56.9309 122.879 58.0553 123.846 59.2503 123.565L73.1807 120.294C74.4841 119.988 75.6618 121.156 75.3939 122.49L71.2552 143.113C70.9767 144.501 72.2573 145.688 73.5893 145.276L82.1934 142.616C83.5273 142.204 84.8089 143.394 84.5267 144.783L77.9496 177.177C77.538 179.203 80.1867 180.308 81.2913 178.571L82.0291 177.41L122.8 94.6142C123.483 93.2278 122.306 91.6471 120.809 91.9409L106.47 94.757C105.123 95.0214 103.976 93.7444 104.357 92.4029L113.715 59.389C114.096 58.0452 112.946 56.7672 111.597 57.0361Z"
+            stroke="url(#radial-bolt-edge)"
+            stroke-width="3"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter-bolt-glow"
+            x="0.0878601"
+            y="0.0878601"
+            width="179.823"
+            height="262.561"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="28.4561"
+              result="effect1_foregroundBlur_693_18989"
+            />
+          </filter>
+          <filter
+            id="filter-bolt-edge-glow"
+            x="48.6306"
+            y="48.6283"
+            width="82.7363"
+            height="139.202"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="3.34777"
+              result="effect1_foregroundBlur_693_18989"
+            />
+          </filter>
+          <radialGradient
+            id="paint0_radial_693_18989"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(79.4533 63.5007) rotate(81.9567) scale(108.196 88.8357)"
+          >
+            <stop offset="0" stop-color="#FFEA83" />
+            <stop offset="0.0833333" stop-color="#FFDD35" />
+            <stop offset="1" stop-color="#FFA800" />
+          </radialGradient>
+          <radialGradient
+            id="paint1_radial_693_18989"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(79.4533 62.3511) rotate(80.2589) scale(89.4759 88.4248)"
+          >
+            <stop offset="0" stop-color="#FFEA83" />
+            <stop offset="0.0833333" stop-color="#FFDD35" />
+            <stop offset="1" stop-color="#FFA800" />
+          </radialGradient>
+          <linearGradient
+            id="linear-mask"
+            x1="75.4703"
+            y1="59.7447"
+            x2="91.2207"
+            y2="165.923"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="#FFEA83" />
+            <stop offset="0.0833333" stop-color="#FFDD35" />
+            <stop offset="1" stop-color="#FFA800" />
+          </linearGradient>
+          <radialGradient
+            id="radial-bolt-color"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(72.7835 62.9782) rotate(77.8103) scale(100.793 123.282)"
+          >
+            <stop offset="0" stop-color="#FFEA83" />
+            <stop offset="0.0833333" stop-color="#FFDD35" />
+            <stop offset="1" stop-color="#FFA800" />
+          </radialGradient>
+          <radialGradient
+            id="radial-bolt-edge"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(79.4533 62.3511) rotate(80.2589) scale(89.4759 88.4248)"
+          >
+            <stop offset="0" stop-color="#FFDD35" />
+            <stop offset="1" stop-color="#FFA800" />
+          </radialGradient>
+        </defs>
+      </svg>
+    </div>
+    <div class="feature__meta meta--center">
+      <div class="meta__title">ビルドの最適化</div>
+      <div class="meta__description">
+        複数ページおよびライブラリモードをサポートする事前設定済みの Rollup ビルド。
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-card {
+  min-height: 370px;
+
+  @media (min-width: 768px) {
+    transform: translate3d(60px, 0, 0);
+  }
+}
+
+.feature__visualization {
+  .left-lines {
+    position: absolute;
+    top: 60px;
+    left: unset;
+    right: 50%;
+
+    @media (min-width: 455px) {
+      left: 0;
+      right: unset;
+    }
+
+    @media (min-width: 768px) {
+      left: unset;
+      right: 50%;
+    }
+
+    @media (min-width: 900px) {
+      left: 0;
+      right: unset;
+    }
+
+    @media (min-width: 1200px) {
+      left: unset;
+      right: 50%;
+    }
+  }
+
+  .right-lines {
+    position: absolute;
+    top: 71px;
+    right: unset;
+    left: 50%;
+
+    @media (min-width: 455px) {
+      right: 0;
+      left: unset;
+    }
+
+    @media (min-width: 768px) {
+      right: unset;
+      left: 50%;
+    }
+
+    @media (min-width: 900px) {
+      right: 0;
+      left: unset;
+    }
+
+    @media (min-width: 1200px) {
+      right: unset;
+      left: 50%;
+    }
+  }
+
+  .bolt {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate3d(-50%, 0, 0);
+
+    .bolt__glow {
+      transition: opacity 0.3s ease;
+      will-change: opacity;
+      opacity: 0.6;
+    }
+
+    .bolt__color {
+      opacity: 0.03;
+    }
+
+    .bolt__edge {
+      opacity: 0.1;
+    }
+
+    .bolt__highlight {
+      opacity: 0;
+    }
+
+    &.active {
+      .bolt__color {
+        animation: bolt-color-entrance 0.5s ease forwards;
+      }
+
+      .bolt__edge {
+        animation: bolt-edge-entrance 0.5s ease forwards;
+      }
+
+      .bolt__glow {
+        opacity: 0.7;
+        transition: opacity 0.1s ease;
+      }
+
+      .bolt__highlight {
+        opacity: 0.6;
+        transition: opacity 0.1s ease;
+        transition-delay: 0.5s;
+      }
+    }
+  }
+}
+
+@keyframes bolt-edge-entrance {
+  0% {
+    opacity: 0;
+  }
+  2% {
+    opacity: 0.6;
+  }
+  30% {
+    opacity: 0.6;
+  }
+  31% {
+    opacity: 0.01;
+  }
+  35% {
+    opacity: 0.01;
+  }
+  36% {
+    opacity: 0.8;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  80% {
+    opacity: 0.3;
+  }
+  82% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes bolt-color-entrance {
+  0% {
+    opacity: 0.03;
+  }
+  2% {
+    opacity: 0.4;
+  }
+  30% {
+    opacity: 0.4;
+  }
+  31% {
+    opacity: 0.01;
+  }
+  35% {
+    opacity: 0.01;
+  }
+  36% {
+    opacity: 0.45;
+  }
+  80% {
+    opacity: 0.45;
+  }
+  80% {
+    opacity: 0.3;
+  }
+  82% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.9;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue
new file mode 100644
index 00000000..e50978c9
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue	
@@ -0,0 +1,281 @@
+<script setup>
+import logoJSON from './images/json.svg'
+import logoCSS from './images/css3.svg'
+import logoJS from './images/js.svg'
+import logoTS from './images/ts.svg'
+import logoWA from './images/wa.svg'
+import logoPostCSS from './images/postcss.svg'
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#rich-features-card')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { isCardActive, startAnimation } = useCardAnimation(
+  '#rich-features-card',
+  null,
+  {
+    once: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="feature-card"
+    id="rich-features-card"
+    :class="{ active: isCardActive }"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization">
+      <div class="card-container">
+        <svg
+          class="background-cards"
+          width="658"
+          height="275"
+          viewBox="0 0 658 275"
+          d
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M105.376 201.33C105.376 193.847 111.442 187.781 118.925 187.781H176.507C183.99 187.781 190.056 193.847 190.056 201.33V258.912C190.056 266.395 183.99 272.461 176.507 272.461H118.925C111.442 272.461 105.376 266.395 105.376 258.912V201.33Z"
+            class="background-card"
+          />
+          <path
+            d="M525.389 96.3271C525.389 88.8443 531.455 82.7783 538.937 82.7783H596.518C604 82.7783 610.066 88.8443 610.066 96.3271V153.909C610.066 161.392 604 167.458 596.518 167.458H538.937C531.455 167.458 525.389 161.392 525.389 153.909V96.3271Z"
+            class="background-card"
+          />
+          <path
+            d="M210.38 -10.3692C210.38 -17.852 216.446 -23.9179 223.929 -23.9179H281.512C288.994 -23.9179 295.06 -17.852 295.06 -10.3692V47.2129C295.06 54.6957 288.994 60.7617 281.512 60.7617H223.929C216.446 60.7617 210.38 54.6957 210.38 47.2129V-10.3692Z"
+            class="background-card"
+          />
+          <path
+            d="M525.389 201.33C525.389 193.847 531.455 187.781 538.937 187.781H596.518C604 187.781 610.066 193.847 610.066 201.33V258.912C610.066 266.395 604 272.461 596.518 272.461H538.937C531.455 272.461 525.389 266.395 525.389 258.912V201.33Z"
+            class="background-card"
+          />
+          <path
+            d="M630.389 201.33C630.389 193.847 636.455 187.781 643.938 187.781H701.52C709.003 187.781 715.069 193.847 715.069 201.33V258.912C715.069 266.395 709.003 272.461 701.52 272.461H643.938C636.455 272.461 630.389 266.395 630.389 258.912V201.33Z"
+            class="background-card"
+          />
+          <path
+            d="M0.373901 201.33C0.373901 193.847 6.4399 187.781 13.9227 187.781H71.5045C78.9873 187.781 85.0531 193.847 85.0531 201.33V258.912C85.0531 266.395 78.9873 272.461 71.5045 272.461H13.9227C6.4399 272.461 0.373901 266.395 0.373901 258.912V201.33Z"
+            class="background-card"
+          />
+          <path
+            d="M630.389 96.3271C630.389 88.8443 636.455 82.7783 643.938 82.7783H701.52C709.003 82.7783 715.069 88.8443 715.069 96.3271V153.909C715.069 161.392 709.003 167.458 701.52 167.458H643.938C636.455 167.458 630.389 161.392 630.389 153.909V96.3271Z"
+            class="background-card"
+          />
+          <path
+            d="M0.373901 96.3271C0.373901 88.8443 6.4399 82.7783 13.9227 82.7783H71.5045C78.9873 82.7783 85.0531 88.8443 85.0531 96.327V153.909C85.0531 161.392 78.9873 167.458 71.5045 167.458H13.9227C6.4399 167.458 0.373901 161.392 0.373901 153.909V96.3271Z"
+            class="background-card"
+          />
+          <path
+            d="M630.389 -10.3692C630.389 -17.852 636.455 -23.918 643.938 -23.918H701.52C709.003 -23.918 715.069 -17.852 715.069 -10.3692V47.2129C715.069 54.6957 709.003 60.7616 701.52 60.7616H643.938C636.455 60.7616 630.389 54.6957 630.389 47.2129V-10.3692Z"
+            class="background-card"
+          />
+          <path
+            d="M0.373901 -10.3692C0.373901 -17.852 6.4399 -23.9179 13.9227 -23.9179H71.5045C78.9873 -23.9179 85.0531 -17.852 85.0531 -10.3692V47.2129C85.0531 54.6957 78.9873 60.7617 71.5045 60.7617H13.9227C6.4399 60.7617 0.373901 54.6957 0.373901 47.2129V-10.3692Z"
+            class="background-card"
+          />
+          <path
+            d="M525.389 -10.3692C525.389 -17.8519 531.455 -23.9179 538.937 -23.9179H596.518C604 -23.9179 610.066 -17.8519 610.066 -10.3692V47.213C610.066 54.6957 604 60.7617 596.518 60.7617H538.937C531.455 60.7617 525.389 54.6957 525.389 47.213V-10.3692Z"
+            class="background-card"
+          />
+          <path
+            d="M420.386 -10.3692C420.386 -17.852 426.452 -23.9179 433.935 -23.9179H491.517C499 -23.9179 505.066 -17.852 505.066 -10.3692V47.2129C505.066 54.6957 499 60.7617 491.517 60.7617H433.935C426.452 60.7617 420.386 54.6957 420.386 47.2129V-10.3692Z"
+            class="background-card"
+          />
+          <path
+            d="M315.383 -10.3692C315.383 -17.852 321.449 -23.9179 328.932 -23.9179H386.514C393.997 -23.9179 400.063 -17.852 400.063 -10.3692V47.2129C400.063 54.6957 393.997 60.7617 386.514 60.7617H328.932C321.449 60.7617 315.383 54.6957 315.383 47.2129V-10.3692Z"
+            class="background-card"
+          />
+          <path
+            d="M210.38 203.023C210.38 195.541 216.446 189.475 223.929 189.475H281.512C288.994 189.475 295.06 195.541 295.06 203.023V260.605C295.06 268.088 288.994 274.154 281.512 274.154H223.929C216.446 274.154 210.38 268.088 210.38 260.605V203.023Z"
+            class="background-card"
+          />
+          <path
+            d="M315.383 203.023C315.383 195.541 321.449 189.475 328.932 189.475H386.514C393.997 189.475 400.063 195.541 400.063 203.023V260.605C400.063 268.088 393.997 274.154 386.514 274.154H328.932C321.449 274.154 315.383 268.088 315.383 260.605V203.023Z"
+            class="background-card"
+          />
+        </svg>
+        <div class="card card--json">
+          <img :src="logoJSON" alt="JSON" />
+        </div>
+        <div class="card card--css">
+          <img :src="logoCSS" alt="CSS3" />
+        </div>
+        <div class="card card--js">
+          <img :src="logoJS" alt="Javascript" />
+        </div>
+        <div class="card card--ts">
+          <img :src="logoTS" alt="Typescript" />
+        </div>
+        <div class="card card--wa">
+          <img :src="logoWA" alt="WebAssembly" />
+        </div>
+        <div class="card card--postcss">
+          <img :src="logoPostCSS" alt="PostCSS" />
+        </div>
+      </div>
+      <!-- Center glow effect -->
+      <div class="center-glow" />
+    </div>
+    <div class="feature__meta meta--center">
+      <div class="meta__title">豊富な機能</div>
+      <div class="meta__description">
+        TypeScript、JSX、CSS などの標準サポート。
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@property --opacity {
+  syntax: '<number>';
+  initial-value: 1;
+  inherits: false;
+}
+
+.feature-card {
+  @media (min-width: 768px) {
+    transform: translate3d(-60px, 0, 0);
+  }
+
+  &.active {
+    .feature__visualization {
+      .card {
+        &:after {
+          border-color: rgba(60, 60, 60, 0.8);
+          --opacity: 0.8;
+          box-shadow: var(--card-color) 0 10px 20px -10px;
+        }
+      }
+
+      .center-glow {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.feature__visualization {
+  display: flex;
+  justify-content: center;
+  align-content: flex-start;
+
+  .card-container {
+    flex-shrink: 0;
+    mask-image: radial-gradient(
+      ellipse 50% 45% at center 25%,
+      rgba(0, 0, 0, 1) 50%,
+      rgba(0, 0, 0, 0.7) 80%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    position: relative;
+    background: #141414;
+
+    .background-card {
+      fill: #181818;
+    }
+  }
+
+  .center-glow {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 300px;
+    height: 140px;
+    background: #ffffff;
+    filter: blur(80px);
+    z-index: 5;
+    transform: translate3d(-50%, 0, 0);
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+    will-change: opacity;
+    mix-blend-mode: overlay;
+  }
+
+  .card {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    background: var(--card-color);
+    width: 85px;
+    aspect-ratio: 1;
+    border-radius: 10px;
+    align-items: center;
+    justify-content: center;
+    transform: translate3d(0, 0, 0);
+    transition: all 0.3s ease;
+    will-change: box-shadow;
+    --card-color: #181818;
+
+    * {
+      position: relative;
+      z-index: 2;
+    }
+
+    &:after {
+      border: 1px solid rgba(60, 60, 60, 0.5);
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: 10px;
+      --opacity: 0.99;
+      background: linear-gradient(
+        to bottom,
+        #181818 30%,
+        rgba(24 24 24 / var(--opacity)) 100%
+      );
+      will-change: background;
+      box-shadow: var(--card-color) 0 5px 10px -30px;
+      transition:
+        --opacity 0.8s ease,
+        box-shadow 0.5s ease;
+      z-index: 1;
+    }
+
+    &.card--json {
+      top: -23px;
+      left: 105px;
+    }
+
+    &.card--css {
+      top: 83px;
+      left: 105px;
+      --card-color: #2a53dd;
+    }
+
+    &.card--js {
+      top: 83px;
+      left: 210px;
+      --card-color: #f7e425;
+    }
+
+    &.card--ts {
+      top: 83px;
+      left: 315px;
+      --card-color: #3d95d2;
+    }
+
+    &.card--wa {
+      top: 83px;
+      left: 420px;
+      --card-color: #7259f0;
+    }
+
+    &.card--postcss {
+      top: 189px;
+      left: 420px;
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureSSRSupport.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureSSRSupport.vue
new file mode 100644
index 00000000..f5a6acf2
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureSSRSupport.vue	
@@ -0,0 +1,540 @@
+<script setup lang="ts">
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#ssr-support')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { isCardActive, startAnimation } = useCardAnimation(
+  '#ssr-support',
+  undefined,
+  {
+    once: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="feature-card"
+    id="ssr-support"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization" :class="{ active: isCardActive }">
+      <svg
+        width="402"
+        height="166"
+        viewBox="0 0 402 166"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        style="margin-top: 10px"
+      >
+        <!-- JS Box -->
+        <g class="js">
+          <g class="js__glow" filter="url(#filter-js-glow)">
+            <rect
+              x="30"
+              y="31.0947"
+              width="104"
+              height="104"
+              rx="16.2078"
+              fill="url(#linear-js-glow)"
+            />
+            <rect
+              x="30.6753"
+              y="31.7701"
+              width="102.649"
+              height="102.649"
+              rx="15.5325"
+              stroke="#A3A3A3"
+              stroke-width="1.35065"
+            />
+          </g>
+          <g class="js__bg" filter="url(#filter-js-bg)">
+            <rect
+              x="30"
+              y="31.0947"
+              width="104"
+              height="104"
+              rx="16.2078"
+              fill="url(#linear-js-bg)"
+            />
+          </g>
+          <rect
+            class="js__border"
+            x="30.6753"
+            y="31.7701"
+            width="102.649"
+            height="102.649"
+            rx="15.5325"
+            stroke="#A3A3A3"
+            stroke-width="1.2"
+          />
+        </g>
+
+        <!-- JS Text -->
+        <text class="js-text" x="80" y="120">.JS</text>
+
+        <!-- Connector -->
+        <path
+          class="connector"
+          opacity="0.25"
+          d="M133.5 84.5H164M164 84.5V58.5C164 52.4249 168.925 47.5 175 47.5H193.5M164 84.5V108C164 114.075 168.925 119 175 119H193.5"
+        />
+
+        <!-- Client Transform Box -->
+        <g class="client" filter="url(#filter-client)">
+          <g clip-path="url(#clip-client)">
+            <rect
+              class="client__bg"
+              x="193"
+              y="20"
+              width="182"
+              height="54"
+              fill="url(#linear-client-bg)"
+              fill-opacity="0.1"
+            />
+            <g class="client__glow" filter="url(#filter-client-glow)">
+              <rect
+                x="213"
+                y="41.5342"
+                width="12"
+                height="12"
+                rx="1"
+                fill="#FFE358"
+              />
+            </g>
+            <rect
+              class="client__indicator"
+              x="212.777"
+              y="41.5338"
+              width="12"
+              height="12"
+              rx="1"
+            />
+          </g>
+          <rect
+            class="client__border"
+            x="193.507"
+            y="22.507"
+            width="180.986"
+            height="50.0537"
+            rx="11.661"
+            stroke="#737373"
+            stroke-opacity="0.3"
+            stroke-width="1.014"
+          />
+        </g>
+
+        <!-- Client Transform Text -->
+        <text class="client-text" x="236" y="53">Client transform</text>
+
+        <!-- Server Transform Box -->
+        <g class="server" filter="url(#filter-server)">
+          <g clip-path="url(#clip-server)">
+            <rect
+              class="server__bg"
+              x="193"
+              y="90"
+              width="186"
+              height="54"
+              fill="url(#linear-server-bg)"
+              fill-opacity="0.1"
+            />
+            <g class="server__glow" filter="url(#filter-server-glow)">
+              <circle cx="218.933" cy="117.534" r="5.93296" fill="#FFE358" />
+            </g>
+            <rect
+              class="server__indicator"
+              x="212.777"
+              y="111.74"
+              width="12"
+              height="12"
+              rx="1"
+            />
+          </g>
+          <rect
+            x="193.507"
+            y="92.7135"
+            width="181.402"
+            height="50.0537"
+            rx="11.661"
+            stroke="#737373"
+            stroke-opacity="0.3"
+            stroke-width="1.014"
+          />
+        </g>
+
+        <!-- Server Transform Text -->
+        <text class="server-text" x="236" y="122">Server transform</text>
+
+        <!-- Definitions -->
+        <defs>
+          <filter
+            id="filter-js-glow"
+            x="0"
+            y="1.09473"
+            width="164"
+            height="164"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="15"
+              result="effect1_foregroundBlur_1_6"
+            />
+          </filter>
+          <filter
+            id="filter-js-bg"
+            x="30"
+            y="31.0947"
+            width="104"
+            height="108"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feMorphology
+              radius="3"
+              operator="erode"
+              in="SourceAlpha"
+              result="effect1_innerShadow_1_6"
+            />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="5" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="shape"
+              result="effect1_innerShadow_1_6"
+            />
+          </filter>
+          <filter
+            id="filter-client"
+            x="193"
+            y="22"
+            width="182"
+            height="55.0677"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="shape"
+              result="effect1_innerShadow_1_6"
+            />
+          </filter>
+          <filter
+            id="filter-client-glow"
+            x="203"
+            y="31.5342"
+            width="32"
+            height="32"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="5"
+              result="effect1_foregroundBlur_1_6"
+            />
+          </filter>
+          <filter
+            id="filter-server"
+            x="193"
+            y="92.2065"
+            width="182.416"
+            height="55.0677"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="shape"
+              result="effect1_innerShadow_1_6"
+            />
+          </filter>
+          <filter
+            id="filter-server-glow"
+            x="203"
+            y="101.601"
+            width="31.8659"
+            height="31.8659"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="5"
+              result="effect1_foregroundBlur_1_6"
+            />
+          </filter>
+          <linearGradient
+            id="linear-js-glow"
+            x1="130"
+            y1="144"
+            x2="22.5"
+            y2="23.5002"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#FFE358" />
+            <stop offset="1" stop-color="#FFE358" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="linear-js-bg"
+            x1="130"
+            y1="144"
+            x2="22.5"
+            y2="23.5002"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#FFE358" />
+            <stop offset="1" stop-color="#FFE358" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="linear-client-bg"
+            x1="193"
+            y1="47"
+            x2="375"
+            y2="47"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#FFE358" />
+            <stop offset="1" stop-color="#FFE358" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="linear-server-bg"
+            x1="193"
+            y1="117"
+            x2="379"
+            y2="117"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#FFE358" />
+            <stop offset="1" stop-color="#FFE358" stop-opacity="0" />
+          </linearGradient>
+          <clipPath id="clip-client">
+            <rect
+              x="193"
+              y="22"
+              width="182"
+              height="51.0677"
+              rx="12.168"
+              fill="white"
+            />
+          </clipPath>
+          <clipPath id="clip-server">
+            <rect
+              x="193"
+              y="92.2065"
+              width="182.416"
+              height="51.0677"
+              rx="12.168"
+              fill="white"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <div class="feature__meta">
+      <div class="meta__title">ファーストクラスの SSR サポート</div>
+      <div class="meta__description">
+        カスタム SSR（サーバーサイドレンダリング）の設定や、独自の SSR フレームワークの構築がかつてないほど簡単になりました。
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-card {
+  @media (min-width: 768px) {
+    transform: translate3d(-60px, 0, 0);
+  }
+
+  .feature__meta {
+    max-width: calc(100%);
+  }
+
+  /* Extend height on smaller devices, to make room for text */
+  @media (max-width: 380px) {
+    height: 400px;
+  }
+}
+
+.feature__visualization {
+  margin-top: 10px;
+
+  svg {
+    width: calc(100% - 15px);
+    margin: 0 auto;
+  }
+
+  .js-text {
+    fill: #a3a3a3;
+    font-family: Inter, sans-serif;
+    font-size: 30px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: -0.5px;
+    user-select: none;
+    pointer-events: none;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .connector {
+    stroke: #a3a3a3;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .client__indicator,
+  .server__indicator {
+    fill: #1e1e1e;
+    transition: all 0.1s ease-in-out;
+  }
+
+  .client-text,
+  .server-text {
+    fill: #565656;
+    font-family: Inter, sans-serif;
+    font-size: 15px;
+    font-weight: 400;
+    user-select: none;
+    pointer-events: none;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .js__glow {
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .js__bg,
+  .client__bg,
+  .client__glow,
+  .server__bg,
+  .server__glow {
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+  }
+
+  &.active {
+    .connector {
+      stroke: #ffe358;
+      transition-delay: 0.1s;
+    }
+
+    .client__indicator,
+    .server__indicator {
+      fill: #fdefab;
+      transition-delay: 0.3s;
+    }
+
+    .js-text {
+      fill: #171717;
+    }
+
+    .js__glow,
+    .js__bg,
+    .client__bg,
+    .client__glow,
+    .server__bg,
+    .server__glow {
+      opacity: 1;
+    }
+
+    .client__glow,
+    .server__glow,
+    .client__bg,
+    .server__bg {
+      transition-delay: 0.3s;
+    }
+
+    .client-text,
+    .server-text {
+      transition-delay: 0.3s;
+      fill: #fafafa;
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue
new file mode 100644
index 00000000..70aa8f18
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue	
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import SvgNode from '../common/SvgNode.vue'
+import { onMounted, onUnmounted, Ref, ref } from 'vue'
+import { gsap } from 'gsap'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: null,
+  },
+  description: {
+    type: String,
+    default: null,
+  },
+  type: {
+    type: String,
+    default: 'blue',
+  },
+})
+
+// Animation state
+const animationPercentage: Ref<number> = ref(0)
+const animationVisible: Ref<boolean> = ref(false)
+
+// GSAP timeline for the icon above the section title
+let timeline: gsap.core.Timeline | null
+
+onMounted(() => {
+  startAnimation()
+})
+
+onUnmounted(() => {
+  if (timeline) {
+    timeline.kill()
+  }
+})
+
+/**
+ * When the component scrolls into viewport, we start the animation.
+ */
+const startAnimation = () => {
+  timeline = gsap
+    .timeline({
+      scrollTrigger: {
+        trigger: `#feature_section_${props.type}`,
+        start: 'top 80%',
+        once: true,
+      },
+    })
+    .call(
+      () => {
+        animationVisible.value = true
+      },
+      null,
+      0,
+    )
+    .to(
+      animationPercentage,
+      {
+        value: 0.55,
+        duration: 2,
+        ease: 'expo.out',
+      },
+      0,
+    )
+}
+</script>
+
+<template>
+  <section class="feature-section" :id="`feature_section_${props.type}`">
+    <!-- Section Title -->
+    <div class="feature-section__title">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="70"
+        height="61"
+        viewBox="0 0 70 61"
+        fill="none"
+        style="overflow: visible"
+      >
+        <path
+          d="M38.5 0.772461V60.5215M22.6301 60.7725V38.7905C22.6301 25.3784 17.3675 12.5156 8 3.03184M54.3699 60.7725V38.7905C54.3699 25.3784 59.6325 12.5156 69 3.03184"
+          stroke="url(#linear-gradient-bg-lines)"
+          stroke-width="2"
+        />
+        <SvgNode
+          v-if="type === 'blue'"
+          path="M22.6301 80.7725V38.7905C22.6301 25.3784 17.3675 12.5156 8 3.03184L-20 -20"
+          :position="animationPercentage"
+          :visible="animationVisible"
+        />
+        <SvgNode
+          v-if="type === 'pink'"
+          path="M54.3699 80.7725V38.7905C54.3699 25.3784 59.6325 12.5156 69 3.03184L90 -20"
+          :position="animationPercentage"
+          :visible="animationVisible"
+          dot-color="#ce9bf4"
+          glow-color="#BD34FE"
+        />
+        <defs>
+          <linearGradient
+            id="linear-gradient-bg-lines"
+            x1="38.5"
+            y1="0.772461"
+            x2="38.5"
+            y2="60.7725"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="#404040" stop-opacity="0" />
+            <stop offset="0.5" stop-color="#737373" />
+            <stop offset="1" stop-color="#404040" stop-opacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <h2 :style="{ '--text-color': type === 'blue' ? '#41D1FF' : '#BD34FE' }">
+        {{ title }}
+      </h2>
+      <h3 v-if="description">{{ description }}</h3>
+    </div>
+
+    <!-- Section Grid -->
+    <div class="feature-section__grid">
+      <!-- Feature Cards -->
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<style>
+.feature-section {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  gap: 0;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+
+  &:nth-of-type(1) {
+    margin-top: -60px;
+
+    @media (min-width: 768px) {
+      margin-top: 0;
+    }
+  }
+
+  &:nth-of-type(2) {
+    margin-top: 160px;
+  }
+
+  svg {
+    position: relative;
+    margin-bottom: 15px;
+    z-index: 2;
+  }
+
+  h2 {
+    --text-color: #404040;
+    background: radial-gradient(
+      circle 300px at 30% -180%,
+      var(--text-color) 0%,
+      #ffffff 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow:
+      0 0 4px rgba(255, 255, 255, 0.1),
+      0 0 14px rgba(130, 168, 236, 0.2);
+    font-weight: 500; /* 日本語版: 太すぎるので調整 */
+  }
+
+  .feature-section__title {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    width: fit-content;
+    align-items: center;
+    gap: 10px;
+    text-align: center;
+  }
+
+  .feature-section__grid {
+    display: grid;
+    grid: auto / repeat(1, 1fr);
+    grid-gap: 30px;
+    margin: 45px auto 0;
+    width: 100%;
+    padding: 0 32px;
+
+    @media (min-width: 768px) {
+      width: 1194px;
+      max-width: 100%;
+      grid: auto / repeat(6, 1fr);
+      margin: 80px auto 0;
+    }
+  }
+
+  .feature-card {
+    border-radius: 12px;
+    border: 1px solid rgba(38, 38, 38, 0.7);
+    background: #141414;
+    min-height: 350px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+    padding: 32px;
+    position: relative;
+    overflow: hidden;
+
+    /* Extend height on smaller devices, to make room for text */
+    @media (max-width: 380px) {
+      padding: 24px;
+    }
+
+    .feature__meta {
+      max-width: 275px;
+      position: relative;
+      z-index: 2;
+      pointer-events: none;
+
+      .meta__title {
+        color: #fff;
+        font-family: Manrope, sans-serif;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        letter-spacing: -0.4px;
+        margin-bottom: 8px;
+        cursor: default;
+      }
+
+      .meta__description {
+        color: #a3a3a3;
+        font-family: Inter, sans-serif;
+        font-size: 15px; /* 日本語版: 元は 16px */
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%;
+        letter-spacing: -0.32px;
+        text-wrap: balance;
+        cursor: default;
+      }
+
+      &.meta--center {
+        margin: 0 auto;
+        text-align: center;
+      }
+    }
+
+    .feature__visualization {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 0;
+    }
+
+    &:nth-child(1),
+    &:nth-child(4) {
+      grid-column: span 1;
+
+      @media (min-width: 768px) {
+        grid-column: span 3;
+      }
+
+      @media (min-width: 1200px) {
+        grid-column: span 2;
+      }
+    }
+
+    &:nth-child(2),
+    &:nth-child(3) {
+      grid-column: span 1;
+
+      @media (min-width: 768px) {
+        grid-column: span 3;
+      }
+
+      @media (min-width: 1200px) {
+        grid-column: span 4;
+      }
+    }
+  }
+
+  &.feature-section--flip {
+    .feature-card {
+      &:nth-child(2),
+      &:nth-child(3) {
+        grid-column: span 1;
+
+        @media (min-width: 768px) {
+          grid-column: span 3;
+        }
+
+        @media (min-width: 1200px) {
+          grid-column: span 2;
+        }
+      }
+
+      &:nth-child(1),
+      &:nth-child(4) {
+        grid-column: span 1;
+
+        @media (min-width: 768px) {
+          grid-column: span 3;
+        }
+
+        @media (min-width: 1200px) {
+          grid-column: span 4;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureTypedAPI.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureTypedAPI.vue
new file mode 100644
index 00000000..2cc4e408
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureTypedAPI.vue	
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { useSlideIn } from '../../../composables/useSlideIn'
+import { useCardAnimation } from '../../../composables/useCardAnimation'
+
+/**
+ * Slide the card in when the page loads
+ */
+useSlideIn('#fully-typed-api')
+
+/**
+ * Start the animation when the card is hovered
+ */
+const { isCardActive, startAnimation } = useCardAnimation(
+  '#fully-typed-api',
+  undefined,
+  {
+    once: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="feature-card"
+    id="fully-typed-api"
+    @mouseover.stop.prevent="startAnimation"
+  >
+    <div class="feature__visualization" :class="{ active: isCardActive }">
+      <div class="ide">
+        <span class="code code__inactive">
+          <span class="code--red">import</span> { createServer }
+          <span class="code--red">from</span>
+          <span class="code--blue">'vite'</span><br /><br />
+          <span class="code--red">const</span> server =
+          <span class="code--red">await</span>
+          <span class="code--purple">createServer</span>({<br />
+          <span class="code--grey"
+            >&nbsp;&nbsp;&nbsp;// user config options</span
+          ><br />
+          })
+        </span>
+        <span class="code code__feature">
+          <span class="code--red">await</span> server.<span
+            class="code--highlight"
+            >listen</span
+          >()<br />
+          <span class="code--extra"
+            >server.<span class="code--purple">printUrls</span>()</span
+          >
+        </span>
+      </div>
+      <div class="tooltip">
+        <span class="code">
+          (method) ViteDevServer.<span class="code--blue">listen</span
+          >(port<span class="code--blue">?:</span> number
+          <span class="code--blue">| undefined,</span> isRestart<span
+            class="code--blue"
+            >?:</span
+          >
+          boolean <span class="code--blue">| undefined</span>):
+          <span class="code--yellow">Promise</span
+          ><span class="code--blue">&lt;</span>ViteDevServer<span
+            class="code--blue"
+            >&gt;</span
+          ><br />
+          <span class="code--descriptor">Start the server.</span>
+        </span>
+      </div>
+    </div>
+    <div class="feature__meta meta--center">
+      <div class="meta__title">完全な型付け API</div>
+      <div class="meta__description">を使用して構築するように設計されています。</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-card {
+  @media (min-width: 768px) {
+    transform: translate3d(60px, 0, 0);
+  }
+}
+
+.feature__visualization {
+  .ide {
+    position: absolute;
+    top: 0;
+    left: 18px;
+    right: 0;
+    height: 195px;
+    border-radius: 0 0 0 12px;
+    overflow: hidden;
+    transition: all 0.4s ease-in-out;
+    border: 1px solid rgba(64, 64, 64, 0.5);
+    border-right: none;
+    border-top: none;
+    background: linear-gradient(
+      to top,
+      rgba(23, 23, 23, 0.35) 0%,
+      #171717 100%
+    );
+  }
+
+  .tooltip {
+    border-radius: 6px 0 0 6px;
+    border: 1px solid #262626;
+    background: linear-gradient(-45deg, #1f1f1f 40%, #282828 50%, #1f1f1f 60%);
+    background-size: 400%;
+    background-position-x: 100%;
+    animation: shimmer 7s infinite linear;
+    padding: 12px 2px 6px 12px;
+    position: absolute;
+    z-index: 5;
+    top: 25px;
+    left: 60px;
+    right: 0;
+    border-top: 1px solid #383838;
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
+    transform: translate3d(0, 20px, 0);
+  }
+
+  .code__inactive {
+    opacity: 0.2;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    filter: blur(0);
+    transition: all 0.4s ease-in-out;
+  }
+
+  .code__feature {
+    position: absolute;
+    top: 140px;
+    left: 15px;
+  }
+
+  .code {
+    color: #fff;
+    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+    font-family:
+      IBM Plex Mono,
+      sans-serif;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 150%;
+    letter-spacing: -0.2px;
+    display: block;
+    margin: 0;
+    user-select: none;
+    pointer-events: none;
+
+    .code--highlight {
+      display: inline-block;
+      position: relative;
+      padding: 2px;
+      color: #dc94ff;
+      transition: all 0.1s ease-in-out;
+
+      &:before {
+        content: '';
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        opacity: 0;
+        background: #94e2fb;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        transition: all 0.1s ease-in-out;
+      }
+    }
+
+    .code--purple {
+      color: #dc94ff;
+    }
+
+    .code--red {
+      color: #ff6b6b;
+    }
+
+    .code--blue {
+      color: #94e2fb;
+    }
+
+    .code--grey {
+      color: #737373;
+    }
+
+    .code--yellow {
+      color: #ffe358;
+    }
+
+    .code--descriptor {
+      margin-top: 8px;
+      padding-top: 6px;
+      display: block;
+      border-top: 1px solid #363636;
+    }
+
+    .code--extra {
+      transition: opacity 0.2s ease-in-out;
+      opacity: 1;
+    }
+  }
+
+  &.active {
+    .code__inactive {
+      filter: blur(5px);
+    }
+
+    .code--highlight {
+      color: #94e2fb;
+
+      &:before {
+        opacity: 0.2;
+      }
+    }
+
+    .tooltip {
+      transition-delay: 0.1s;
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .code--extra {
+      opacity: 0.2;
+    }
+  }
+}
+
+@keyframes shimmer {
+  to {
+    background-position-x: 0;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/2. feature-section/images/css3.svg b/.vitepress/theme/components/landing/2. feature-section/images/css3.svg
new file mode 100644
index 00000000..afa66d98
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/images/css3.svg	
@@ -0,0 +1,16 @@
+<svg width="34" height="48" viewBox="0 0 34 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_1_865" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="34" height="48">
+    <path d="M33.8759 0.407997H0.779999V47.123H33.8759V0.407997Z" fill="white"/>
+  </mask>
+  <g mask="url(#mask0_1_865)">
+    <path d="M33.879 9.589L30.864 43.366L17.311 47.123L3.795 43.371L0.783005 9.589H33.879Z" fill="#264DE4"/>
+    <path d="M28.283 41.215L30.859 12.351H17.331V44.251L28.283 41.215Z" fill="#2965F1"/>
+    <path d="M7.688 24.88L8.05901 29.024H17.331V24.88H7.688Z" fill="#EBEBEB"/>
+    <path d="M17.332 16.494H17.317H6.942L7.319 20.637H17.332V16.494Z" fill="#EBEBEB"/>
+    <path d="M17.331 39.952V35.641L17.313 35.646L12.698 34.4L12.403 31.095H10.161H8.244L8.825 37.601L17.312 39.957L17.331 39.952Z" fill="#EBEBEB"/>
+    <path d="M8.57201 0.407997H13.59V2.507H10.671V4.605H13.59V6.704H8.57201V0.407997Z" fill="white"/>
+    <path d="M14.594 0.407997H19.612V2.233H16.692V2.598H19.612V6.795H14.594V4.879H17.513V4.514H14.594V0.407997Z" fill="white"/>
+    <path d="M20.616 0.407997H25.634V2.233H22.715V2.598H25.634V6.795H20.616V4.879H23.536V4.514H20.616V0.407997Z" fill="white"/>
+    <path d="M22.42 29.023L21.939 34.397L17.318 35.644V39.955L25.812 37.601L25.875 36.901L26.848 25.993L26.949 24.88L27.697 16.494H17.318V20.637H23.157L22.78 24.88H17.318V29.023H22.42Z" fill="white"/>
+  </g>
+</svg>
diff --git a/.vitepress/theme/components/landing/2. feature-section/images/js.svg b/.vitepress/theme/components/landing/2. feature-section/images/js.svg
new file mode 100644
index 00000000..59a03751
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/images/js.svg	
@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_1_878" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+    <path d="M47.4286 0.407997H0.00799561V47.8286H47.4286V0.407997Z" fill="white"/>
+  </mask>
+  <g mask="url(#mask0_1_878)">
+    <path d="M47.428 0.407997H0.00799561V47.828H47.428V0.407997Z" fill="#F7DF1E"/>
+    <path d="M31.864 37.455C32.819 39.015 34.062 40.161 36.26 40.161C38.106 40.161 39.285 39.238 39.285 37.963C39.285 36.435 38.074 35.894 36.041 35.005L34.927 34.527C31.712 33.157 29.576 31.441 29.576 27.813C29.576 24.471 32.122 21.927 36.102 21.927C38.935 21.927 40.972 22.913 42.439 25.495L38.969 27.723C38.205 26.353 37.381 25.813 36.102 25.813C34.796 25.813 33.969 26.641 33.969 27.723C33.969 29.059 34.797 29.601 36.709 30.429L37.823 30.906C41.609 32.529 43.747 34.185 43.747 37.906C43.747 41.918 40.595 44.116 36.363 44.116C32.224 44.116 29.551 42.144 28.243 39.559L31.864 37.455ZM16.122 37.841C16.822 39.083 17.459 40.133 18.99 40.133C20.454 40.133 21.378 39.56 21.378 37.333V22.181H25.834V37.393C25.834 42.007 23.129 44.108 19.18 44.108C15.612 44.108 13.546 42.261 12.495 40.037L16.122 37.841Z" fill="black"/>
+  </g>
+</svg>
diff --git a/.vitepress/theme/components/landing/2. feature-section/images/json.svg b/.vitepress/theme/components/landing/2. feature-section/images/json.svg
new file mode 100644
index 00000000..20d86ed7
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/images/json.svg	
@@ -0,0 +1,21 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_5_918" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="49" height="49">
+    <path d="M48.2674 0H0V48.2674H48.2674V0Z" fill="white"/>
+  </mask>
+  <g mask="url(#mask0_5_918)">
+    <g opacity="0.4">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M24.092 35.9285C34.771 50.4856 45.221 31.8653 45.206 20.6678C45.188 7.42869 31.769 0.0292969 24.083 0.0292969C11.747 0.0292969 -0.00100708 10.2246 -0.00100708 24.1739C-0.00100708 39.6785 13.466 48.2668 24.083 48.2668C21.681 47.9209 13.674 46.2052 13.566 27.7631C13.494 15.2899 17.635 10.3066 24.066 12.4989C24.21 12.5523 31.159 15.2937 31.159 24.2493C31.159 33.1667 24.092 35.9285 24.092 35.9285Z" fill="url(#paint0_linear_5_918)"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M24.079 12.4895C17.023 10.0575 8.379 15.8731 8.379 27.5215C8.379 46.5413 22.473 48.2674 24.182 48.2674C36.518 48.2674 48.266 38.0721 48.266 24.1229C48.266 8.61818 34.799 0.0299037 24.182 0.0299037C27.123 -0.377346 40.032 3.21253 40.032 20.8564C40.032 32.3624 30.393 38.6263 24.123 35.9499C23.979 35.8965 17.03 33.1551 17.03 24.1995C17.03 15.2821 24.079 12.4895 24.079 12.4895Z" fill="url(#paint1_linear_5_918)"/>
+    </g>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear_5_918" x1="7.13799" y1="7.1379" x2="41.137" y2="41.148" gradientUnits="userSpaceOnUse">
+      <stop/>
+      <stop offset="1" stop-color="white"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_5_918" x1="41.141" y1="41.1439" x2="7.14199" y2="7.13674" gradientUnits="userSpaceOnUse">
+      <stop/>
+      <stop offset="1" stop-color="white"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/2. feature-section/images/postcss.svg b/.vitepress/theme/components/landing/2. feature-section/images/postcss.svg
new file mode 100644
index 00000000..5251081b
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/images/postcss.svg	
@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_1_897" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+    <path d="M47.4356 0.410995H0.0150146V47.2313H47.4356V0.410995Z" fill="white"/>
+  </mask>
+  <g mask="url(#mask0_1_897)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M47.26 20.8C47.228 20.183 47.213 19.566 47.149 18.949C47.039 18.111 46.928 17.257 46.739 16.434C46.596 15.754 46.36 15.105 46.123 14.457C45.823 13.698 45.522 12.923 45.143 12.195C44.527 11.025 43.722 9.98 42.979 8.889C42.488 8.193 41.857 7.624 41.382 6.912C41.114 6.5 40.719 6.153 40.324 5.837C39.692 5.33 39.029 4.87099 38.366 4.42799C37.86 4.07999 37.355 3.74799 36.817 3.44799C36.391 3.20899 35.933 3.01999 35.49 2.81399C34.985 2.57699 34.495 2.291 33.927 2.181C33.784 2.151 33.658 2.10299 33.515 2.05499C33.152 1.92899 32.805 1.78699 32.441 1.67599C31.889 1.50099 31.352 1.296 30.782 1.153C30.231 1.011 29.662 0.917003 29.093 0.837003C28.462 0.744003 27.815 0.710999 27.182 0.648999C26.772 0.600999 26.361 0.553998 25.966 0.538998C25.366 0.506998 24.75 0.507001 24.15 0.492001C23.849 0.476001 23.534 0.444004 23.234 0.460004C22.776 0.476004 22.318 0.522995 21.859 0.585995C21.417 0.633995 20.975 0.711998 20.549 0.775998C20.028 0.838998 19.507 0.870994 18.986 0.934994C18.496 0.997994 17.99 1.093 17.501 1.173C17.327 1.204 17.153 1.26699 16.979 1.29899C16.601 1.37799 16.206 1.40999 15.826 1.53599C15.148 1.74299 14.468 1.981 13.805 2.233C13.188 2.486 12.588 2.755 12.004 3.071C11.404 3.403 10.835 3.79699 10.266 4.17799C9.72798 4.54199 9.192 4.921 8.67 5.332C8.165 5.729 7.69098 6.171 7.23198 6.614C6.97998 6.866 6.77397 7.16699 6.53697 7.45199C6.14297 7.91099 5.74797 8.353 5.36897 8.828C5.05397 9.224 4.76797 9.63499 4.46797 10.047C3.93197 10.773 3.47399 11.549 3.04799 12.324C2.87399 12.641 2.716 12.957 2.558 13.273C2.321 13.747 2.06798 14.206 1.84798 14.696C1.68898 15.029 1.56297 15.393 1.46797 15.756C1.24797 16.532 1.026 17.323 0.821001 18.097C0.631001 18.794 0.583987 19.521 0.568987 20.233C0.552987 20.866 0.615972 21.483 0.678972 22.116C0.694972 22.274 0.600988 22.464 0.788988 22.59C0.725988 22.764 0.773991 22.86 0.866991 22.89C0.757991 23.064 0.914984 23.176 0.852984 23.334C0.836984 23.365 0.900987 23.428 0.930987 23.476C0.930987 23.524 0.915987 23.587 0.930987 23.634C0.947987 23.777 1.01097 23.919 1.01097 24.077C1.01097 24.188 1.10498 24.314 1.13698 24.425C1.15198 24.472 1.137 24.552 1.105 24.583C1.01 24.694 1.02599 24.789 1.16799 24.852C1.24799 25.058 1.216 25.152 1.2 25.248C1.232 25.39 1.184 25.437 1.2 25.469C1.327 25.723 1.375 26.007 1.39 26.292C1.39 26.355 1.42099 26.419 1.45299 26.498C1.46899 26.498 1.45299 26.798 1.45299 26.798C1.53099 26.751 1.595 26.735 1.674 26.703C1.722 26.909 1.76899 27.1 1.83199 27.274C1.91099 27.4 1.91099 27.462 1.87999 27.478C1.94299 27.762 1.974 28.031 2.084 28.3C2.084 28 2.054 27.7 2.006 27.415C2.227 27.494 2.41699 27.573 2.54299 27.573C2.55899 27.525 2.57499 27.462 2.59099 27.43C2.49599 27.336 2.41698 27.194 2.32198 27.099C2.35398 27.225 2.32198 27.273 2.32198 27.321C2.25898 27.289 2.18 27.257 2.101 27.225C2.164 27.147 2.22798 27.067 2.32198 26.973C2.32198 26.83 2.24399 26.703 2.02199 26.719C2.11699 26.688 2.21198 26.641 2.32198 26.609C2.49598 26.514 2.30699 26.34 2.30699 26.119C2.32199 25.85 2.16399 25.582 2.11699 25.296C2.03799 24.854 2.05398 24.19 2.00698 23.747C1.91198 23.667 1.83297 23.873 1.81697 23.889C1.86497 24.268 1.91198 24.648 1.94298 25.028C1.84898 24.711 1.78498 24.363 1.70598 23.983C1.68998 24.094 1.67497 24.142 1.67497 24.205C1.59697 24.283 1.65898 24.379 1.70598 24.49C1.59598 24.442 1.46898 24.458 1.46898 24.458V24.901C1.31198 24.743 1.26498 24.617 1.18498 24.505C1.15398 24.379 1.13698 24.253 1.10698 24.127C1.13698 24.047 1.10698 24 1.10698 23.953C1.09098 23.841 1.07498 23.715 1.05898 23.572C1.07498 23.557 1.04399 23.32 1.04399 23.32C1.16999 23.335 1.24999 23.35 1.32799 23.35C1.16999 23.146 1.27999 23.019 1.34499 22.892C1.37599 22.829 1.487 22.814 1.519 22.75C1.645 22.512 1.851 22.323 1.851 22.022C1.851 21.88 1.89899 21.722 1.91399 21.579C1.94499 21.31 1.97699 21.041 1.99199 20.772C2.02399 20.424 1.992 20.076 2.071 19.744C2.199 19.192 2.35699 18.638 2.52999 18.084C2.65599 17.688 2.79898 17.309 2.95598 16.913C3.19298 16.296 3.41498 15.679 3.71498 15.094C4.14098 14.24 4.631 13.417 5.105 12.579C5.405 12.057 5.72097 11.567 6.05397 11.061C6.36897 10.57 6.68399 10.064 7.04799 9.60499C7.55399 8.95699 8.10698 8.355 8.72298 7.817C9.35498 7.248 9.95499 6.663 10.634 6.141C11.518 5.459 12.451 4.859 13.445 4.337C14.251 3.91 15.087 3.57699 15.925 3.25999C16.462 3.05499 17.046 2.95999 17.6 2.78599C18.231 2.57999 18.863 2.486 19.526 2.47C19.953 2.454 20.364 2.40599 20.79 2.35899C21.169 2.32899 21.548 2.29599 21.959 2.24899C21.911 2.31199 21.896 2.344 21.88 2.375C21.707 2.628 21.517 2.881 21.343 3.134C21.201 3.34 21.043 3.562 20.901 3.767C20.648 4.1 20.379 4.432 20.142 4.78C19.779 5.302 19.447 5.84 19.068 6.362C18.69 6.868 18.278 7.343 17.883 7.832C17.362 8.513 16.873 9.209 16.352 9.889C15.877 10.537 15.373 11.155 14.915 11.804C14.504 12.372 14.14 12.974 13.745 13.558C13.161 14.429 12.577 15.282 11.993 16.153C11.534 16.817 11.076 17.465 10.602 18.13C10.571 18.178 10.523 18.192 10.476 18.224C10.35 18.429 10.35 18.54 10.302 18.635C10.176 18.872 10.05 19.11 9.907 19.332C9.828 19.458 9.71797 19.568 9.62297 19.695C9.60697 19.505 9.87498 19.41 9.74898 19.173C9.67098 19.3 9.59098 19.41 9.51198 19.537L9.32298 19.915C9.38598 19.963 9.49697 19.995 9.38597 20.089C9.33797 20.169 9.291 20.263 9.243 20.343C9.323 20.295 9.36898 20.248 9.41698 20.185C9.41698 20.359 9.323 20.5 9.243 20.643C9.18 20.769 9.02197 20.865 8.91197 20.959C8.92797 20.975 9.03797 21.023 9.05397 21.038C9.19697 20.99 9.244 20.912 9.26 20.959C9.308 20.896 9.35499 20.848 9.37099 20.801C9.43299 20.643 9.52799 20.517 9.68599 20.453C9.74899 20.421 9.79598 20.374 9.84398 20.327C10.318 19.836 10.808 19.362 11.234 18.839C11.898 18.032 12.498 17.195 13.131 16.372C13.398 16.024 13.715 15.676 13.999 15.344C14.045 15.707 14.014 16.055 13.999 16.388C13.951 16.973 13.919 17.558 13.873 18.159C13.856 18.396 13.873 18.633 13.856 18.871C13.856 18.934 13.808 18.981 13.808 19.045C13.808 19.203 13.856 19.377 13.856 19.535C13.808 20.12 13.745 20.689 13.697 21.275C13.681 21.401 13.744 21.528 13.775 21.639C13.697 22.493 13.871 23.395 13.728 24.296C13.839 24.122 13.871 24.012 13.871 23.901C13.886 23.807 13.871 23.712 13.871 23.601V23.443C13.886 23.158 13.949 22.858 13.918 22.572C13.886 22.256 13.886 21.956 13.949 21.655C13.981 21.529 13.934 21.371 14.013 21.212V21.449C13.997 22.35 14.029 23.252 13.903 24.154C13.887 24.233 13.951 24.376 13.777 24.359C13.634 24.644 13.808 24.85 13.651 25.008C13.619 25.04 13.681 25.182 13.697 25.277C13.634 25.467 13.634 25.467 13.728 25.483C13.744 25.831 13.777 26.146 13.792 26.479C14.044 25.879 13.918 25.26 14.029 24.643C14.045 24.897 14.061 25.15 14.045 25.418C14.045 25.83 14.029 26.225 14.014 26.636C14.014 26.715 13.997 26.795 13.982 26.874C13.934 27.096 13.919 27.317 13.84 27.522C13.777 27.681 13.808 27.918 13.808 28.107V28.71C13.871 28.978 13.792 29.121 13.84 29.279C13.792 29.438 13.777 29.485 13.792 29.532L13.84 29.77C14.156 29.738 14.014 29.975 14.14 30.102C14.045 30.229 14.077 30.276 14.077 30.34C14.077 30.482 14.062 30.609 14.045 30.751C14.045 31.115 14.03 31.479 14.03 31.827C14.03 31.875 14.045 31.921 14.045 31.968C14.045 32.001 14.03 32.413 14.03 32.413C14.062 32.459 14.03 32.507 13.982 32.554C13.967 32.554 13.919 30.545 13.919 30.545H13.682C13.651 31.494 13.73 32.348 13.556 33.234C13.367 33.249 13.304 33.281 13.098 33.281C12.608 33.281 12.118 33.281 11.628 33.297C11.044 33.297 10.476 33.312 9.89 33.312C9.607 33.312 9.30699 33.345 9.02199 33.345C8.64299 33.345 8.24798 33.297 7.86998 33.297C7.28498 33.297 6.71598 33.345 6.13198 33.36C5.70498 33.376 5.27898 33.376 4.85298 33.392C4.56798 33.407 4.28298 33.422 3.99898 33.455C3.87298 33.47 3.762 33.518 3.605 33.565C3.556 33.565 3.44698 33.549 3.35198 33.565C3.19298 33.597 3.05199 33.691 2.89299 33.723C2.65599 33.772 2.59298 33.834 2.62398 34.072V34.23C2.60898 34.261 2.97197 34.181 2.97197 34.181C2.93997 34.181 2.92399 34.276 2.87599 34.356C3.00399 34.308 3.08197 34.276 3.16197 34.245C3.39897 34.356 3.60399 34.293 3.79299 34.341C4.40899 34.498 5.03998 34.563 5.67198 34.625C6.08298 34.657 6.47799 34.673 6.88899 34.688C7.47299 34.72 8.05698 34.752 8.64098 34.752C9.13098 34.752 9.60498 34.704 10.094 34.704C10.772 34.704 11.453 34.735 12.132 34.752C12.274 34.752 12.432 34.735 12.59 34.735H13.742C14.77 34.704 15.796 34.687 16.823 34.657C17.409 34.64 18.009 34.609 18.593 34.593L20.394 34.545C21.089 34.529 21.784 34.529 22.463 34.515C22.985 34.515 23.49 34.497 24.012 34.482C24.596 34.466 25.196 34.419 25.781 34.387C26.097 34.371 26.413 34.339 26.729 34.308C27.108 34.277 27.503 34.23 27.881 34.214C28.45 34.181 29.035 34.166 29.604 34.134C30.315 34.087 31.026 34.024 31.752 34.008C32.416 33.977 33.095 33.992 33.759 33.977C34.343 33.961 34.928 33.929 35.528 33.913L36.525 33.865C36.525 33.865 37.187 33.85 37.519 33.817C38.088 33.786 38.656 33.723 39.225 33.707C39.588 33.691 39.951 33.707 40.315 33.691C40.899 33.675 41.499 33.643 42.084 33.643C42.304 33.643 42.541 33.675 42.826 33.691C42.699 33.802 42.62 33.865 42.525 33.944C42.588 33.96 42.651 33.992 42.715 34.024C42.62 34.087 42.541 34.102 42.463 34.102C42.431 34.181 42.399 34.213 42.367 34.372H42.651C42.541 34.372 42.446 34.514 42.336 34.609C42.21 34.576 42.099 34.609 42.036 34.783C42.146 34.845 42.13 34.893 42.115 34.957C41.925 35.019 41.783 35.083 41.863 35.288C41.798 35.32 41.72 35.351 41.641 35.399C41.563 35.525 41.42 35.557 41.451 35.731C41.515 35.746 41.577 35.779 41.625 35.793C41.546 35.825 41.467 35.872 41.388 35.904C41.104 36.078 41.231 36.157 41.294 36.236C41.246 36.268 41.199 36.299 41.151 36.315C41.183 36.458 41.229 36.489 41.246 36.489C41.183 36.536 41.103 36.6 41.009 36.679C40.961 36.821 40.897 36.884 40.834 36.979C40.771 37.074 40.74 37.201 40.66 37.296C40.329 37.66 40.092 38.088 39.666 38.372C39.507 38.483 39.366 38.625 39.223 38.768C38.939 39.036 38.686 39.337 38.386 39.59C37.992 39.922 37.582 40.223 37.154 40.523C36.634 40.887 36.113 41.251 35.591 41.599C35.307 41.788 34.991 41.93 34.691 42.104C34.391 42.278 34.106 42.437 33.806 42.61C33.616 42.736 33.442 42.91 33.237 43.007C32.716 43.229 32.163 43.418 31.626 43.624C31.104 43.846 30.725 44.035 30.331 44.177C29.967 44.303 29.588 44.399 29.209 44.477C29.083 44.51 28.94 44.477 28.798 44.493C28.529 44.541 28.261 44.605 27.992 44.636C27.297 44.731 26.602 44.795 25.907 44.89C25.496 44.938 25.101 45.016 24.69 45.064C24.407 45.079 24.106 45.048 23.822 45.048C23.617 45.048 23.396 45.096 23.19 45.064C22.858 45.016 22.527 44.938 22.195 44.875C22.117 44.859 22.005 44.826 21.942 44.859C21.816 44.923 21.705 44.828 21.578 44.859C21.5 44.875 21.421 44.811 21.342 44.811C21.278 44.796 21.199 44.828 21.12 44.811C20.945 44.764 20.788 44.701 20.597 44.717C20.409 44.732 20.219 44.637 20.015 44.591C19.73 44.527 19.463 44.465 19.177 44.4C19.067 44.369 18.973 44.321 18.862 44.258C18.451 44.258 18.182 44.242 17.929 44.147C17.708 44.069 17.503 43.958 17.266 43.99C17.203 44.005 17.156 43.974 17.092 43.974C17.044 43.911 16.998 43.784 16.951 43.784C16.635 43.8 16.445 43.532 16.176 43.452C16.035 43.404 15.924 43.246 15.782 43.199C15.434 43.056 15.151 42.756 14.756 42.709C14.629 42.693 14.503 42.63 14.361 42.583C14.409 42.645 14.439 42.693 14.487 42.74C14.029 42.518 13.602 42.266 13.176 42.028C13.113 42.012 13.066 41.95 13.018 41.918L12.592 41.633C12.355 41.681 12.26 41.585 12.196 41.554C11.77 41.254 11.281 41.063 10.869 40.732C10.695 40.589 10.491 40.494 10.365 40.32C10.143 40.051 9.875 39.861 9.575 39.703C9.338 39.577 9.11698 39.434 8.89598 39.292C8.78498 39.213 8.674 39.118 8.674 38.944C8.674 38.833 8.62697 38.722 8.48497 38.785C8.42197 38.691 8.35899 38.58 8.27999 38.548C8.08999 38.47 7.96398 38.326 7.82198 38.2C7.67998 38.074 7.56998 37.9 7.39598 37.837C7.07898 37.711 6.88998 37.442 6.70098 37.221C6.25798 36.698 5.86298 36.128 5.45198 35.576C5.41998 35.528 5.35698 35.496 5.30998 35.449C5.37298 35.623 5.45199 35.765 5.53099 35.923C5.37299 35.86 5.26299 35.749 5.16799 35.638C5.15199 35.655 6.25798 37.473 6.25798 37.473C6.35398 37.616 6.43199 37.758 6.52699 37.901C6.28899 37.916 6.13199 37.79 6.05199 37.647C5.91099 37.395 5.75199 37.237 5.43599 37.269C5.40499 37.158 5.37299 37.031 5.35799 36.921C5.29399 36.921 5.24697 36.921 5.13597 36.905C5.35797 37.253 5.54798 37.553 5.75298 37.901C5.67298 37.853 5.62698 37.822 5.59398 37.806C5.87798 38.107 6.083 38.487 6.446 38.677C6.525 39.04 6.93599 39.214 7.03099 39.562C6.95299 39.546 6.88798 39.53 6.80898 39.514C6.68298 39.356 6.53997 39.198 6.39897 39.024C6.42997 39.135 6.477 39.23 6.54 39.309C6.73 39.546 6.90399 39.783 7.12499 39.989C7.20399 40.069 7.31499 40.101 7.31499 40.244C7.44099 40.307 7.489 40.322 7.536 40.322C7.568 40.418 7.52098 40.56 7.70998 40.528C7.83598 40.765 7.96197 40.765 8.13597 40.687C8.34197 40.892 8.45298 40.909 8.59398 40.783C8.59398 40.861 8.60997 40.94 8.60997 41.003C8.67297 40.972 8.65798 40.924 8.65798 40.845C8.73598 40.908 8.78399 40.94 8.81499 40.971C8.97299 41.193 9.11499 41.398 9.33599 41.572C9.63699 41.826 9.90498 42.095 10.189 42.332C10.742 42.791 11.359 43.171 11.975 43.519C12.733 43.946 13.46 44.405 14.234 44.815C15.166 45.306 16.161 45.639 17.187 45.876C17.567 45.955 17.93 46.034 18.31 46.128C18.64 46.224 18.972 46.366 19.304 46.445C19.81 46.556 20.331 46.651 20.836 46.745C20.946 46.761 21.058 46.777 21.184 46.793C21.325 46.825 21.499 46.761 21.531 46.809C21.61 46.935 21.673 46.872 21.768 46.856C21.878 46.824 22.005 46.824 22.131 46.824C22.573 46.84 23 46.935 23.442 46.903C23.538 46.903 23.68 46.824 23.759 46.981C23.901 46.918 23.98 46.918 24.043 46.903C24.06 47.045 24.043 47.045 24.013 47.061C23.98 47.076 23.933 47.092 23.87 47.14C24.438 47.25 24.976 47.266 25.449 47.14C26.271 47.203 26.982 47.108 27.661 46.871C27.724 46.95 27.772 47.061 27.866 46.903C27.898 46.855 27.977 46.839 28.041 46.823C28.182 46.791 28.356 46.728 28.482 46.775C28.625 46.823 28.673 46.697 28.782 46.697C28.973 46.697 29.146 46.681 29.32 46.649C29.415 46.633 29.51 46.586 29.62 46.554C29.494 46.49 29.368 46.474 29.272 46.474C29.463 46.379 29.636 46.3 29.81 46.222C29.778 46.269 29.746 46.332 29.684 46.332H29.904C29.856 46.332 29.793 46.474 29.715 46.569C30.282 46.427 30.804 46.3 31.31 46.173C31.135 45.842 31.499 45.953 31.625 45.762C31.467 45.81 31.31 45.857 31.151 45.888C31.688 45.62 32.241 45.383 32.778 45.146C32.7 45.241 32.604 45.288 32.463 45.368C32.557 45.383 32.62 45.383 32.668 45.398C32.92 45.478 32.858 45.241 32.936 45.098C33.236 45.098 33.362 45.051 33.505 45.003C33.663 44.955 33.82 44.908 33.979 44.845C34.231 44.735 34.468 44.593 34.721 44.467C34.769 44.45 34.847 44.467 34.91 44.467C35.085 44.355 35.147 44.26 35.194 44.276C35.417 44.308 35.573 44.228 35.636 44.024C35.747 43.944 35.826 43.881 35.905 43.833C36.251 43.643 36.583 43.454 36.931 43.264C37.057 43.264 37.121 43.264 37.152 43.248C37.358 43.152 37.548 43.043 37.737 42.931C37.689 42.916 37.579 42.853 37.579 42.853C37.737 42.821 37.783 42.805 37.879 42.774C38.258 42.329 38.78 42.029 39.174 41.681C39.348 41.666 39.348 41.618 39.348 41.587C39.411 41.508 39.474 41.413 39.552 41.349C39.9 41.033 40.279 40.764 40.595 40.432C41.053 39.972 41.495 39.497 41.906 39.007C42.284 38.564 42.665 38.122 42.98 37.631C43.423 36.951 43.802 36.255 44.197 35.542C44.481 35.037 44.734 34.531 45.019 34.025C45.049 33.977 45.113 33.914 45.161 33.914C45.587 33.866 46.014 33.836 46.425 33.788C46.52 33.772 46.63 33.71 46.725 33.662C46.677 33.582 46.646 33.488 46.599 33.408C46.535 33.312 46.44 33.234 46.377 33.138C46.314 33.06 46.267 32.964 46.219 32.87C46.171 32.792 46.125 32.728 46.077 32.648C45.981 32.474 45.887 32.3 45.807 32.111C45.791 32.063 45.759 31.985 45.776 31.937C46.06 31.321 46.171 30.656 46.439 30.039C46.707 29.406 46.787 28.695 46.913 28.014C47.024 27.366 47.087 26.718 47.165 26.07C47.213 25.611 47.276 25.168 47.291 24.709C47.388 23.982 47.355 23.301 47.339 22.62C47.324 22.02 47.291 21.403 47.261 20.802L47.26 20.8ZM7.627 40.271C7.517 40.145 7.422 40.002 7.312 39.876L7.35997 39.828C7.53197 40.018 7.70599 40.208 7.87999 40.414C7.78499 40.366 7.674 40.335 7.627 40.271ZM7.87999 40.414C7.92799 40.398 7.97599 40.398 8.02199 40.382C8.06999 40.461 8.102 40.556 8.148 40.651C7.928 40.635 7.81699 40.54 7.87999 40.414ZM24.309 46.947V46.899C24.609 46.867 24.893 46.836 25.193 46.804V46.851C24.893 46.899 24.609 46.929 24.309 46.945V46.947ZM28.288 46.535C28.068 46.583 27.831 46.615 27.61 46.647C27.531 46.663 27.436 46.742 27.405 46.599C27.373 46.615 27.341 46.615 27.31 46.631C27.388 46.868 27.578 46.678 27.736 46.773C27.388 46.821 27.058 46.852 26.725 46.899V46.868C26.821 46.852 26.931 46.836 27.025 46.82V46.773C26.868 46.757 26.71 46.741 26.551 46.741C26.505 46.741 26.441 46.805 26.394 46.821C26.331 46.836 26.268 46.852 26.189 46.852C25.92 46.868 25.652 46.868 25.399 46.884C25.383 46.884 25.351 46.868 25.335 46.868V46.82C26.393 46.678 27.436 46.536 28.494 46.394C28.511 46.425 28.511 46.457 28.526 46.488C28.431 46.488 28.368 46.521 28.289 46.536L28.288 46.535ZM28.526 46.378C28.89 46.33 29.222 46.299 29.569 46.252C28.843 46.457 28.605 46.489 28.526 46.378ZM14.768 14.441C15.272 13.745 15.794 13.049 16.299 12.337C16.457 12.13 16.583 11.909 16.741 11.704C16.789 11.64 16.852 11.609 16.931 11.545L16.915 11.515C16.978 11.435 17.041 11.371 17.073 11.309C17.154 11.182 17.201 11.04 17.264 10.897C17.28 10.867 17.327 10.836 17.327 10.836C17.549 10.946 17.549 10.709 17.627 10.63C17.769 10.471 17.912 10.298 18.038 10.139C18.133 10.013 18.227 9.90199 18.307 9.75999C18.322 9.71199 18.275 9.634 18.259 9.57H18.212C18.26 9.538 18.307 9.492 18.354 9.459C18.37 9.459 18.37 9.459 18.385 9.444C18.48 9.301 18.575 9.15799 18.67 9.03199C18.859 8.77999 19.064 8.52599 19.285 8.30499C19.254 8.38299 19.222 8.463 19.19 8.526C19.206 8.526 19.206 8.543 19.222 8.543C19.412 8.289 19.617 8.052 19.807 7.798C19.791 7.783 19.775 7.76699 19.759 7.76699C19.681 7.84599 19.617 7.925 19.538 8.005C19.522 7.989 19.507 7.973 19.49 7.973C19.649 7.767 19.807 7.56199 19.964 7.32499C19.996 7.37299 20.028 7.43499 20.09 7.56199C20.154 7.40399 20.217 7.293 20.264 7.182C20.217 7.23 20.154 7.27699 20.107 7.32499L20.059 7.27699L20.343 6.85099C20.643 6.42399 20.944 5.98099 21.244 5.55299C21.355 5.39499 21.496 5.269 21.592 5.11C21.892 4.51 22.366 4.035 22.729 3.481C22.808 3.371 22.918 3.276 23.013 3.181C23.091 3.085 23.156 3.117 23.219 3.197C23.645 3.734 24.071 4.288 24.497 4.826C24.814 5.222 25.13 5.59999 25.43 6.01199C25.793 6.51799 26.141 7.024 26.504 7.531C26.915 8.116 27.326 8.70099 27.721 9.30099C28.321 10.188 28.889 11.074 29.49 11.959C29.932 12.608 30.374 13.241 30.801 13.889H29.994C29.252 13.874 28.493 13.811 27.751 13.842C26.74 13.89 25.714 14.001 24.703 14.08C23.423 14.191 22.128 14.206 20.849 14.206C20.39 14.206 19.932 14.27 19.475 14.302C18.921 14.333 18.384 14.365 17.831 14.38C17.183 14.412 16.553 14.428 15.904 14.444C15.541 14.46 15.162 14.444 14.767 14.444L14.768 14.441ZM32.885 21.716V21.859C32.87 21.859 32.854 21.876 32.822 21.876C32.759 21.653 32.696 21.416 32.617 21.194C32.459 20.735 32.285 20.276 32 19.865C31.683 19.423 31.4 18.965 31.083 18.506C31.005 18.395 30.894 18.3 30.799 18.206C30.467 17.841 30.135 17.461 29.709 17.193C29.077 16.797 28.429 16.465 27.734 16.18C27.544 16.102 27.371 16.006 27.182 15.895H27.56L30.261 15.847C30.846 15.832 31.415 15.832 31.999 15.8C32.14 15.8 32.22 15.848 32.299 15.974C32.44 16.211 32.583 16.449 32.741 16.686C32.757 16.718 32.789 16.764 32.789 16.812C32.789 17.16 32.789 17.524 32.804 17.872C32.819 18.236 32.852 18.584 32.867 18.948C32.867 19.312 32.835 19.691 32.851 20.071C32.867 20.609 32.883 21.163 32.883 21.715L32.885 21.716ZM15.888 16.42C16.631 16.388 17.341 16.341 18.068 16.309C18.636 16.277 19.221 16.261 19.789 16.229C20.026 16.214 20.247 16.199 20.484 16.229C20.232 16.357 19.978 16.483 19.758 16.641C19.473 16.831 19.205 17.084 18.92 17.29C18.635 17.495 18.382 17.748 18.146 18.017C17.846 18.38 17.514 18.697 17.197 19.045C16.975 19.298 16.723 19.535 16.534 19.804C16.266 20.152 16.029 20.53 15.776 20.927C15.855 19.423 15.95 17.937 15.886 16.419L15.888 16.42ZM26.204 31.636C25.698 31.762 25.177 31.905 24.655 31.968C24.213 32.032 23.755 32.016 23.297 32.016C22.885 32.016 22.49 32.001 22.079 31.968C21.621 31.922 21.163 31.874 20.721 31.668C20.341 31.494 19.947 31.336 19.568 31.146C19.188 30.956 18.809 30.735 18.524 30.387C18.32 30.133 18.035 29.928 17.782 29.707C17.83 29.896 17.94 30.055 18.114 30.165C18.035 30.26 17.924 30.213 17.766 29.959C17.719 29.991 17.672 30.007 17.64 30.023C17.688 29.912 17.735 29.801 17.782 29.707C17.719 29.58 17.64 29.438 17.577 29.31C17.451 29.105 17.325 28.884 17.214 28.678C17.182 28.63 17.182 28.583 17.151 28.536C17.071 28.441 16.992 28.346 16.928 28.251C16.802 28.062 16.692 27.857 16.534 27.666C16.534 27.714 16.55 27.761 16.55 27.825C16.534 27.825 16.519 27.84 16.519 27.84L16.186 27.034C16.17 27.034 16.17 27.034 16.155 27.049L16.439 28.094C16.423 28.094 16.407 28.109 16.391 28.109C16.344 28.046 16.297 27.983 16.265 27.905C16.233 27.777 16.139 27.777 16.061 27.825C16.012 27.857 15.981 27.967 15.997 28.014C16.108 28.283 16.234 28.552 16.361 28.821C16.392 28.916 16.424 28.995 16.471 29.09C16.487 29.122 16.535 29.153 16.535 29.201C16.598 29.327 16.646 29.453 16.724 29.564C16.867 29.754 17.025 29.944 17.167 30.133C17.308 30.323 17.434 30.529 17.561 30.719C17.576 30.75 17.624 30.75 17.639 30.767C17.718 31.004 17.987 31.177 18.176 31.082C18.224 31.446 18.619 31.573 18.777 31.921C18.587 31.842 18.445 31.779 18.319 31.715C18.302 31.731 18.302 31.746 18.286 31.778C18.476 31.873 18.666 31.968 18.839 32.078C18.998 32.174 19.155 32.268 19.298 32.378C19.487 32.552 19.709 32.648 19.976 32.711C19.962 32.663 19.946 32.647 19.946 32.647C20.388 32.853 20.846 33.074 21.193 33.247C19.55 33.279 17.797 33.311 15.98 33.343C15.98 33.043 15.964 32.758 15.964 32.457C15.964 32.331 15.996 32.22 15.979 32.093C15.931 31.367 15.931 30.638 15.837 29.926C15.743 29.168 15.743 28.424 15.759 27.663C15.774 27.253 15.743 26.826 15.727 26.415C15.727 25.861 15.727 25.322 15.744 24.77C15.744 24.691 15.775 24.628 15.807 24.548H15.855C15.87 24.58 15.855 24.628 15.885 24.644C15.933 24.692 16.012 24.77 16.044 24.754C16.139 24.691 16.281 24.628 16.313 24.532C16.391 24.343 16.423 24.137 16.423 23.948C16.423 23.806 16.487 23.711 16.549 23.616C16.582 23.568 16.597 23.521 16.629 23.458C16.566 23.41 16.503 23.379 16.424 23.316C16.487 23.141 16.472 22.936 16.709 22.841C16.74 22.825 16.74 22.745 16.757 22.698C16.772 22.571 16.787 22.428 16.804 22.302C16.835 22.35 16.852 22.365 16.882 22.397C16.898 22.365 16.914 22.349 16.914 22.349C16.914 22.286 16.898 22.159 16.914 22.159C17.104 22.128 17.025 21.922 17.119 21.828C17.134 21.811 17.103 21.763 17.103 21.731C17.103 21.7 17.103 21.653 17.119 21.653C17.339 21.605 17.308 21.368 17.45 21.257C17.498 21.225 17.513 21.179 17.576 21.099C17.702 21.32 17.481 21.431 17.466 21.589C17.733 21.431 17.813 21.052 17.655 20.941C17.718 20.893 17.781 20.83 17.829 20.767C18.003 20.577 18.191 20.403 18.35 20.213C18.461 20.072 18.524 19.898 18.634 19.755C18.698 19.676 18.824 19.613 18.919 19.565C19.203 19.408 19.471 19.234 19.645 18.965C19.677 18.933 19.724 18.902 19.771 18.87C19.819 18.838 19.914 18.838 19.93 18.791C19.946 18.76 19.899 18.68 19.867 18.633C19.929 18.601 19.993 18.538 20.119 18.474C20.071 18.569 20.056 18.633 20.024 18.697L20.102 18.775C20.245 18.664 20.466 18.538 20.608 18.443C20.608 18.428 20.529 18.365 20.529 18.365C20.435 18.413 20.292 18.491 20.151 18.555C20.181 18.507 20.181 18.476 20.199 18.46C20.419 18.318 20.64 18.176 20.877 18.064C21.429 17.812 21.983 17.558 22.536 17.321C22.63 17.273 22.758 17.306 22.867 17.306C22.914 17.306 22.945 17.306 22.994 17.29C23.246 17.211 23.499 17.132 23.752 17.068C23.861 17.037 23.988 17.021 24.1 17.021C24.572 17.036 25.046 17.036 25.52 17.068C25.725 17.084 25.915 17.131 26.105 17.194C26.341 17.274 26.594 17.384 26.815 17.494C27.084 17.638 27.336 17.796 27.59 17.97C28.048 18.27 28.474 18.602 28.932 18.871C29.374 19.14 29.722 19.504 30.006 19.916C30.355 20.406 30.749 20.848 30.907 21.449L31.143 22.494C31.191 22.683 31.302 22.873 31.254 23.094C31.174 23.49 31.111 23.901 31.048 24.297C31.017 24.456 30.985 24.615 31.002 24.771C31.032 25.263 30.843 25.69 30.653 26.133C30.59 26.275 30.495 26.418 30.416 26.576C30.432 26.591 30.527 26.639 30.542 26.639L30.685 26.355C30.701 26.355 30.701 26.355 30.716 26.371C30.637 26.592 30.574 26.829 30.494 27.051C30.306 27.541 30.116 28.047 29.879 28.522C29.753 28.791 29.531 29.012 29.374 29.266C29.216 29.487 29.09 29.724 28.932 29.93C28.79 30.104 28.648 30.278 28.458 30.404C28.032 30.72 27.589 31.037 27.131 31.29C26.847 31.464 26.515 31.559 26.2 31.638L26.204 31.636ZM17.784 30.796L17.768 30.812C17.735 30.797 17.688 30.781 17.657 30.749L17.277 30.179C17.246 30.132 17.229 30.085 17.246 30.022C17.42 30.291 17.595 30.544 17.784 30.796ZM27.61 32.963C28.32 32.663 28.905 32.237 29.441 31.746C29.521 31.666 29.599 31.588 29.694 31.524C30.358 31.113 30.847 30.543 31.29 29.911C31.795 29.183 32.127 28.361 32.538 27.586C32.569 27.522 32.601 27.46 32.633 27.412C32.601 29.215 32.807 30.986 33.043 32.774C31.259 32.837 29.442 32.9 27.61 32.964V32.963ZM43.627 32.489C43.611 32.521 43.579 32.552 43.564 32.585C43.548 32.552 43.548 32.505 43.532 32.441C43.437 32.695 43.232 32.568 43.09 32.568C42.237 32.584 41.368 32.584 40.515 32.584C39.693 32.584 38.857 32.584 38.035 32.599C37.767 32.599 37.482 32.662 37.213 32.678C36.566 32.709 35.918 32.726 35.271 32.741C35.223 32.741 35.176 32.663 35.097 32.599C35.081 32.631 35.049 32.678 35.002 32.741C34.985 32.71 34.954 32.679 34.922 32.632C34.906 32.68 34.89 32.726 34.874 32.758H34.828C34.796 32.537 34.733 32.331 34.733 32.109C34.733 31.635 34.781 31.161 34.796 30.686C34.813 30.465 34.796 30.259 34.796 30.053C34.86 30.101 34.907 30.133 34.971 30.179C35.002 30.117 35.034 30.07 35.065 30.023C35.065 30.023 35.034 30.006 35.002 29.975C35.032 29.959 35.064 29.927 35.064 29.911C35.08 29.863 35.112 29.816 35.112 29.785C35.112 29.674 35.08 29.579 35.064 29.485C35.08 29.485 35.095 29.485 35.112 29.468L35.206 29.942H35.254C35.191 29.833 35.396 29.737 35.223 29.611C35.207 29.595 35.238 29.5 35.238 29.453C35.19 29.358 35.16 29.264 35.112 29.137C35.128 29.121 35.175 29.105 35.223 29.089C35.16 29.058 35.112 29.026 35.065 29.011C35.223 28.868 35.223 28.789 35.08 28.631C35.113 28.616 35.144 28.616 35.144 28.601C35.144 28.458 35.144 28.316 35.113 28.175C35.081 28.015 35.161 27.827 34.923 27.73C34.939 27.779 34.955 27.81 34.986 27.857C34.986 27.857 34.938 27.873 34.891 27.905C34.686 27.714 34.813 27.46 34.765 27.176C34.876 27.208 34.955 27.24 35.034 27.272C35.002 27.161 34.923 27.034 34.876 26.892H34.811V25.847C34.811 25.864 34.922 25.864 34.986 25.88C34.986 25.864 35.001 25.848 35.001 25.832C34.953 25.769 34.889 25.706 34.826 25.627L34.858 25.595C34.732 25.437 34.795 25.217 34.795 25.169V24.061C34.954 24.22 34.717 24.425 34.954 24.52V24.362H34.938C34.922 24.125 34.922 23.888 34.906 23.65H34.875C34.859 23.682 34.859 23.698 34.843 23.73H34.811L34.906 19.949C35.064 20.155 35.238 20.345 35.348 20.55C35.712 21.215 36.185 21.784 36.628 22.385C37.007 22.907 37.354 23.476 37.702 24.014C38.128 24.663 38.539 25.311 38.966 25.959C39.282 26.45 39.614 26.941 39.944 27.415C40.244 27.842 40.561 28.253 40.877 28.665C41.145 29.029 41.429 29.393 41.698 29.756C42.014 30.199 42.33 30.642 42.646 31.069C42.803 31.29 42.977 31.512 43.15 31.733C43.246 31.859 43.388 31.955 43.483 32.033C43.468 32.033 43.452 32.033 43.42 32.018C43.468 32.081 43.498 32.128 43.531 32.16C43.705 32.255 43.721 32.349 43.626 32.492L43.627 32.489ZM44.432 28.535V28.424C44.432 28.456 44.448 28.503 44.432 28.535ZM44.97 21.56C44.953 21.56 44.859 21.464 44.844 21.449C44.827 21.497 44.844 21.544 44.812 21.607C44.796 21.56 44.686 21.576 44.686 21.529C44.67 21.75 44.78 21.972 44.764 22.193C44.812 22.161 45.001 22.145 45.048 22.098C45.064 22.114 45.096 22.129 45.112 22.129C44.796 22.367 44.875 22.604 45.017 22.874C45.048 22.936 45.143 23.063 45.048 23.19C45.017 23.221 45.064 23.316 45.08 23.395H45.126V23.425L44.984 23.473C44.953 23.425 44.764 23.332 44.764 23.251V24.059C44.922 24.107 44.922 24.328 44.985 24.439C45.018 24.391 45.033 24.359 45.049 24.313L45.065 24.328C45.049 24.422 45.033 24.517 45.001 24.613C44.97 24.754 44.938 24.881 44.923 25.023C44.923 25.039 44.953 25.071 44.953 25.086C44.781 25.483 44.875 25.924 44.812 26.335C44.764 26.635 44.812 26.953 44.781 27.269C44.748 27.538 44.685 27.822 44.622 28.091C44.606 28.139 44.574 28.154 44.496 28.186C44.527 27.996 44.512 27.87 44.48 27.696C44.463 27.696 44.258 27.585 44.242 27.585C44.242 27.807 44.368 28.107 44.416 28.36C44.368 28.344 44.179 28.234 44.164 28.234C44.131 28.423 44.131 28.676 44.115 28.882C44.099 29.04 43.958 29.182 43.941 29.356C43.941 29.452 44.052 29.514 44.036 29.673H44.162C44.162 29.357 44.305 29.073 44.305 28.74H44.352C44.368 28.772 44.416 28.804 44.4 28.819C44.368 28.993 44.304 29.183 44.321 29.357C44.321 29.452 44.399 29.547 44.369 29.657C44.336 29.753 44.321 29.848 44.305 29.99C44.288 29.911 44.273 29.879 44.273 29.832C44.257 29.832 44.115 29.816 44.099 29.816C44.083 29.911 44.21 30.005 44.194 30.085C44.178 30.1 44.162 30.1 44.13 30.117L43.609 29.357C43.198 28.756 42.787 28.154 42.377 27.538C42.265 27.379 42.171 27.221 42.091 27.064C41.602 26.224 41.065 25.418 40.465 24.643C40.007 24.058 39.642 23.424 39.216 22.809C38.822 22.224 38.427 21.654 38.032 21.068C37.89 20.879 37.717 20.705 37.59 20.499C37.18 19.851 36.816 19.186 36.406 18.538C36.058 18 35.68 17.477 35.316 16.956C35.19 16.782 35.064 16.591 34.937 16.402C34.921 16.372 34.906 16.34 34.906 16.293C34.874 15.944 34.842 15.596 34.826 15.264C34.826 14.948 34.858 14.632 34.858 14.299V14.015C34.858 13.935 34.873 13.872 34.873 13.792C34.888 13.777 34.904 13.746 34.92 13.73C34.462 13.73 33.988 13.713 33.53 13.73C33.23 13.745 33.072 13.618 32.867 13.397C32.266 12.717 31.824 11.942 31.303 11.214C30.813 10.518 30.308 9.83699 29.802 9.15699C29.391 8.60399 28.98 8.066 28.57 7.513C28.111 6.88 27.67 6.247 27.195 5.614C26.626 4.856 26.042 4.096 25.458 3.337C25.187 2.989 24.887 2.657 24.587 2.293C24.793 2.325 24.983 2.35599 25.172 2.37199L25.931 2.42C26.5 2.467 27.068 2.49899 27.636 2.57699C28.11 2.64099 28.584 2.73599 29.074 2.81399C30.117 2.98799 31.144 3.27299 32.139 3.60499C32.724 3.79499 33.292 4.04799 33.862 4.28599C35.14 4.80799 36.357 5.44 37.558 6.104C37.936 6.31 38.158 6.64199 38.441 6.94299C38.852 7.36999 39.264 7.797 39.658 8.239C40.115 8.762 40.542 9.299 40.985 9.837C41.379 10.312 41.789 10.786 42.185 11.261C42.311 11.403 42.407 11.577 42.516 11.735C42.769 12.115 43.054 12.48 43.275 12.89C43.432 13.192 43.527 13.54 43.637 13.872C43.794 14.362 43.953 14.836 44.111 15.327C44.221 15.69 44.315 16.071 44.395 16.449C44.458 16.703 44.443 16.971 44.521 17.224C44.617 17.557 44.521 17.92 44.617 18.253C44.632 18.285 44.647 18.332 44.664 18.364C44.727 18.426 44.774 18.49 44.679 18.585C44.664 18.601 44.664 18.663 44.679 18.711C44.712 18.68 44.727 18.648 44.759 18.601C44.759 18.632 44.774 18.649 44.774 18.664C44.774 18.726 44.758 18.79 44.774 18.853C44.774 18.884 44.805 18.931 44.821 18.963C44.853 18.931 44.884 18.915 44.947 18.867C45.089 19.405 45.105 19.943 45.105 20.497C45.105 21.019 45.2 21.541 44.979 22.047C45.026 21.873 44.916 21.714 44.963 21.556L44.97 21.56Z" fill="#DD3A0A"/>
+  </g>
+</svg>
diff --git a/.vitepress/theme/components/landing/2. feature-section/images/ts.svg b/.vitepress/theme/components/landing/2. feature-section/images/ts.svg
new file mode 100644
index 00000000..223587b2
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/images/ts.svg	
@@ -0,0 +1,10 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_1_884" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+    <path d="M47.4326 0.407997H0.0119934V47.8286H47.4326V0.407997Z" fill="white"/>
+  </mask>
+  <g mask="url(#mask0_1_884)">
+    <path d="M42.801 0.407997H4.64301C2.08501 0.407997 0.0119934 2.481 0.0119934 5.039V43.197C0.0119934 45.755 2.08501 47.828 4.64301 47.828H42.801C45.359 47.828 47.432 45.755 47.432 43.197V5.039C47.432 2.481 45.359 0.407997 42.801 0.407997Z" fill="#3178C6"/>
+    <path d="M42.801 0.407997H4.64301C2.08501 0.407997 0.0119934 2.481 0.0119934 5.039V43.197C0.0119934 45.755 2.08501 47.828 4.64301 47.828H42.801C45.359 47.828 47.432 45.755 47.432 43.197V5.039C47.432 2.481 45.359 0.407997 42.801 0.407997Z" fill="#3178C6"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.366 38.142V42.779C30.12 43.165 31.011 43.455 32.04 43.648C33.069 43.842 34.154 43.938 35.294 43.938C36.406 43.938 37.461 43.832 38.462 43.619C39.462 43.407 40.339 43.057 41.092 42.569C41.846 42.081 42.443 41.444 42.883 40.656C43.322 39.869 43.542 38.896 43.542 37.737C43.542 36.896 43.416 36.16 43.165 35.527C42.914 34.895 42.552 34.332 42.078 33.839C41.605 33.347 41.037 32.905 40.375 32.513C39.713 32.122 38.966 31.753 38.135 31.405C37.527 31.154 36.981 30.91 36.497 30.673C36.014 30.437 35.604 30.195 35.265 29.949C34.927 29.703 34.666 29.442 34.483 29.166C34.299 28.891 34.207 28.58 34.207 28.232C34.207 27.913 34.289 27.626 34.454 27.37C34.618 27.114 34.85 26.894 35.149 26.71C35.449 26.527 35.816 26.384 36.251 26.283C36.686 26.182 37.169 26.131 37.701 26.131C38.087 26.131 38.495 26.16 38.925 26.218C39.355 26.276 39.788 26.365 40.223 26.486C40.658 26.607 41.08 26.759 41.491 26.942C41.902 27.126 42.281 27.338 42.629 27.58V23.248C41.923 22.977 41.153 22.777 40.317 22.646C39.481 22.516 38.522 22.451 37.44 22.451C36.338 22.451 35.294 22.569 34.309 22.806C33.323 23.042 32.456 23.412 31.707 23.914C30.958 24.416 30.366 25.056 29.931 25.834C29.496 26.611 29.279 27.541 29.279 28.623C29.279 30.004 29.677 31.183 30.475 32.158C31.272 33.134 32.482 33.96 34.106 34.636C34.744 34.897 35.338 35.153 35.889 35.404C36.439 35.655 36.915 35.916 37.316 36.186C37.717 36.457 38.034 36.752 38.266 37.07C38.498 37.389 38.614 37.751 38.614 38.157C38.614 38.456 38.541 38.734 38.396 38.99C38.251 39.246 38.031 39.468 37.737 39.657C37.442 39.845 37.075 39.992 36.635 40.098C36.195 40.205 35.681 40.258 35.091 40.258C34.086 40.258 33.091 40.082 32.105 39.729C31.12 39.376 30.207 38.848 29.366 38.142ZM21.571 26.719H27.519V22.914H10.94V26.719H16.859V43.66H21.571V26.719Z" fill="white"/>
+  </g>
+</svg>
diff --git a/.vitepress/theme/components/landing/2. feature-section/images/wa.svg b/.vitepress/theme/components/landing/2. feature-section/images/wa.svg
new file mode 100644
index 00000000..8e6f976d
--- /dev/null
+++ b/.vitepress/theme/components/landing/2. feature-section/images/wa.svg	
@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_1_891" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+    <path d="M47.4436 0.0210037H0.0230103V47.4416H47.4436V0.0210037Z" fill="white"/>
+  </mask>
+  <g mask="url(#mask0_1_891)">
+    <path d="M29.158 0.0210037C29.158 0.105004 29.158 0.188 29.158 0.277C29.158 3.28 26.723 5.714 23.721 5.714C20.717 5.714 18.283 3.279 18.283 0.277C18.283 0.188 18.283 0.105004 18.283 0.0210037H0.0230103V47.442H47.444V0.0210037H29.158Z" fill="#654FF0"/>
+    <path d="M11.04 25.576H14.183L16.328 37.003H16.367L18.946 25.576H21.886L24.215 37.143H24.26L26.706 25.576H29.788L25.783 42.366H22.664L20.354 30.94H20.294L17.821 42.366H14.645L11.04 25.576ZM33.332 25.576H38.286L43.206 42.366H39.964L38.894 38.63H33.25L32.424 42.366H29.267L33.332 25.576ZM35.218 29.715L33.847 35.875H38.113L36.539 29.715H35.218Z" fill="white"/>
+  </g>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/FrameworkCard.vue b/.vitepress/theme/components/landing/3. frameworks-section/FrameworkCard.vue
new file mode 100644
index 00000000..f154f7ab
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/FrameworkCard.vue	
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { Ref, ref } from 'vue'
+
+/**
+ * A single framework or tool to display in the frameworks section.
+ */
+export interface Framework {
+  /**
+   * The name of the framework.
+   */
+  name?: string
+
+  /**
+   * A string representing the URL of the logo in SVG format.
+   */
+  logo?: string
+
+  /**
+   * A string representing the hex color of the glow effect.
+   */
+  color?: string
+
+  /**
+   * A string representing the URL of the framework/tool's homepage.
+   */
+  url?: string
+
+  /**
+   * Whether the framework card is visible or not.
+   */
+  visible: Ref<boolean>
+}
+
+interface Props {
+  framework?: Framework
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  framework: (): Framework => ({
+    visible: ref(true),
+  }),
+})
+</script>
+
+<template>
+  <component
+    :is="props.framework.url ? 'a' : 'div'"
+    :href="props.framework.url ? props.framework.url : undefined"
+    target="_blank"
+    rel="noopener"
+    class="framework-card"
+    :style="{ '--glow-color': props.framework.color }"
+    :class="{ active: props.framework.visible.value === true }"
+  >
+    <img
+      v-if="props.framework.logo"
+      :src="props.framework.logo"
+      :alt="props.framework.name"
+    />
+  </component>
+</template>
+
+<style scoped>
+.framework-card {
+  width: 96px;
+  height: 96px;
+  border-radius: 12px;
+  border: 1px solid rgba(38, 38, 38, 0.7);
+  background: #181818;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  --glow-color: rgba(0, 0, 0, 0);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  user-select: none;
+
+  img {
+    user-select: none;
+    filter: drop-shadow(
+      0 0 0.8rem color-mix(in srgb, var(--glow-color) 40%, transparent)
+    );
+  }
+
+  &.active {
+    opacity: 1;
+  }
+}
+
+.framework-card:not(:has(img)) {
+  transform: scale(1) translate3d(0, 0, 0);
+  transition: transform 3s ease;
+
+  &:hover {
+    transform: scale(0.9) translate3d(0, 0, 0);
+    transition: transform 0.2s ease-in-out;
+  }
+}
+
+.framework-card:has(img) {
+  cursor: pointer;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    right: 10%;
+    bottom: 10%;
+    background-color: var(--glow-color);
+    filter: blur(18px);
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 3s ease;
+    will-change: opacity;
+  }
+
+  &:hover {
+    &:before {
+      opacity: 1;
+      transition: opacity 0.2s ease;
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue b/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
new file mode 100644
index 00000000..1c13b1c0
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
@@ -0,0 +1,419 @@
+<script setup lang="ts">
+import { computed, ComputedRef, onMounted, onUnmounted, Ref, ref } from 'vue'
+import FrameworkCard, { Framework } from './FrameworkCard.vue'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+// Framework assets
+import logoAstro from './images/astro.svg'
+import logoNuxt from './images/nuxt.svg'
+import logoVue from './images/vue.svg'
+import logoAnalog from './images/analog.svg'
+import logoPlaywright from './images/playwright.svg'
+import logoMarko from './images/marko.svg'
+import logoStorybook from './images/storybook.svg'
+import logoQwik from './images/qwik.svg'
+import logoVitest from './images/vitest.svg'
+import logoRedwood from './images/redwood.svg'
+import logoSolid from './images/solid.svg'
+import logoAngular from './images/angular.svg'
+import logoReact from './images/react.svg'
+import logoRemix from './images/remix.svg'
+import logoSvelte from './images/svelte.svg'
+import logoLaravel from './images/laravel.svg'
+import logoEmber from './images/ember.svg'
+
+/**
+ * The frameworks and tools to display in this section.
+ */
+const frameworks: Framework[] = [
+  {
+    name: 'Vitest',
+    logo: logoVitest,
+    color: '#fac52b',
+    url: 'https://vitest.dev/',
+    visible: ref(false),
+  },
+  {
+    name: 'React',
+    logo: logoReact,
+    color: '#00d6fd',
+    url: 'https://react.dev/',
+    visible: ref(false),
+  },
+  {
+    name: 'Angular',
+    logo: logoAngular,
+    color: '#e03237',
+    url: 'https://angular.dev/',
+    visible: ref(false),
+  },
+  {
+    name: 'Vue',
+    logo: logoVue,
+    color: '#40b782',
+    url: 'https://vuejs.org/',
+    visible: ref(false),
+  },
+  {
+    name: 'Solid',
+    logo: logoSolid,
+    color: '#75b2df',
+    url: 'https://www.solidjs.com/',
+    visible: ref(false),
+  },
+  {
+    name: 'Svelte',
+    logo: logoSvelte,
+    color: '#fd3e00',
+    url: 'https://svelte.dev/',
+    visible: ref(false),
+  },
+  {
+    name: 'Astro',
+    logo: logoAstro,
+    color: '#FFFFFF',
+    url: 'https://astro.build',
+    visible: ref(false),
+  },
+  {
+    name: 'Remix',
+    logo: logoRemix,
+    color: '#3991fd',
+    url: 'https://remix.run/',
+    visible: ref(false),
+  },
+  {
+    name: 'Nuxt',
+    logo: logoNuxt,
+    color: '#00da81',
+    url: 'https://nuxt.com',
+    visible: ref(false),
+  },
+  {
+    name: 'Qwik',
+    logo: logoQwik,
+    color: '#18b5f4',
+    url: 'https://qwik.builder.io/',
+    visible: ref(false),
+  },
+  {
+    name: 'Redwood',
+    logo: logoRedwood,
+    color: '#be4622',
+    url: 'https://redwoodjs.com/',
+    visible: ref(false),
+  },
+  {
+    name: 'Analog',
+    logo: logoAnalog,
+    color: '#c10f2e',
+    url: 'https://analogjs.org/',
+    visible: ref(false),
+  },
+  {
+    name: 'Playwright',
+    logo: logoPlaywright,
+    color: '#d45247',
+    url: 'https://playwright.dev/',
+    visible: ref(false),
+  },
+  {
+    name: 'Storybook',
+    logo: logoStorybook,
+    color: '#fd4684',
+    url: 'https://storybook.js.org/',
+    visible: ref(false),
+  },
+  {
+    name: 'Marko',
+    logo: logoMarko,
+    color: '#de2a87',
+    url: 'https://markojs.com/',
+    visible: ref(false),
+  },
+  {
+    name: 'Laravel',
+    logo: logoLaravel,
+    color: '#eb4432',
+    url: 'https://laravel.com/',
+    visible: ref(false),
+  },
+  {
+    name: 'EmberJS',
+    logo: logoEmber,
+    color: '#e04e39',
+    url: 'https://emberjs.com/',
+    visible: ref(false),
+  },
+]
+
+// Starting parameters
+const screenWidth: Ref<number> = ref(1920)
+let resizeTimeout: ReturnType<typeof setTimeout> | null = null
+let timeline: gsap.core.Timeline | null = null
+
+/**
+ * When the resize event fires, update the screen width.
+ */
+const handleResize = () => {
+  screenWidth.value = window.innerWidth
+}
+
+/**
+ * Throttle the resize event handler.
+ */
+const throttledResizeHandler = () => {
+  if (resizeTimeout === null) {
+    resizeTimeout = setTimeout(() => {
+      handleResize()
+      resizeTimeout = null
+    }, 100)
+  }
+}
+
+onMounted(() => {
+  // Set the initial size of the screen
+  handleResize()
+
+  // Listen for resize events
+  window.addEventListener('resize', throttledResizeHandler)
+
+  // Initialize the GSAP timeline
+  timeline = gsap.timeline({
+    scrollTrigger: {
+      trigger: '#frameworks-section',
+      start: 'top 70%',
+      once: true,
+    },
+  })
+
+  frameworks.forEach((framework, index) => {
+    timeline!.set(framework.visible, { value: true }, index * 0.05)
+  })
+})
+
+onUnmounted(() => {
+  // Deregister the throttled event handler
+  window.removeEventListener('resize', throttledResizeHandler)
+
+  // Clear any pending execution of the resize handler
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout)
+    resizeTimeout = null
+  }
+
+  // Kill the GSAP timeline
+  if (timeline) {
+    timeline.kill()
+    timeline = null
+  }
+})
+
+/**
+ * How many total blocks (framework or empty) will fit in a single row?
+ */
+const numBlocksPerRow: ComputedRef<number> = computed(() => {
+  return Math.floor(screenWidth.value / (96 + 24))
+})
+
+const paddedBlocksPerSide: ComputedRef<number> = computed(() => {
+  if (screenWidth.value < 840) {
+    return 0
+  }
+  if (screenWidth.value < 1280) {
+    return 1
+  }
+  if (screenWidth.value < 1600) {
+    return 2
+  }
+  return Math.max(Math.floor((screenWidth.value - 840) / 280), 0)
+})
+
+const numFrameworksPerRow = computed(
+  () => numBlocksPerRow.value - paddedBlocksPerSide.value * 2,
+)
+
+/**
+ * The indexes of the blocks on each row that support framework cards.
+ */
+const centerIndexes: ComputedRef<{ start: number; end: number }> = computed(
+  () => {
+    const startIndex = paddedBlocksPerSide.value
+    return {
+      start: startIndex,
+      end: numBlocksPerRow.value - paddedBlocksPerSide.value,
+    }
+  },
+)
+
+/**
+ * How many rows do we need to display all the frameworks?
+ */
+const numRows: ComputedRef<number> = computed(() => {
+  return Math.ceil(frameworks.length / numFrameworksPerRow.value)
+})
+
+/**
+ * Generate CSS transformations for each row, to gracefully slide between horizontal positions.
+ */
+const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
+  return {
+    transform: `translate3d(var(--row-offset), 0, 0)`,
+  }
+})
+</script>
+
+<template>
+  <section class="frameworks-section" id="frameworks-section">
+    <h2>お気に入りのフレームワークやツールを強化</h2>
+    <div class="frameworks-container">
+      <!-- Top Row -->
+      <div class="framework-row" :style="rowStyle">
+        <FrameworkCard v-for="i in numBlocksPerRow + 2" />
+      </div>
+
+      <!-- Logo Rows -->
+      <template v-for="rowIndex in numRows">
+        <div class="framework-row" :style="rowStyle">
+          <template v-for="columnIndex in numBlocksPerRow + 2">
+            <template
+              v-if="
+                columnIndex - 1 >= centerIndexes.start &&
+                columnIndex - 1 < centerIndexes.end
+              "
+            >
+              <FrameworkCard
+                :framework="
+                  frameworks[
+                    (rowIndex - 1) * numFrameworksPerRow +
+                      (columnIndex - 1) -
+                      centerIndexes.start
+                  ]
+                "
+              />
+            </template>
+            <template v-else>
+              <FrameworkCard />
+            </template>
+          </template>
+        </div>
+      </template>
+
+      <!-- Bottom Row -->
+      <div class="framework-row" :style="rowStyle">
+        <FrameworkCard v-for="i in numBlocksPerRow + 2" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.frameworks-section {
+  margin-top: 150px;
+
+  @media (min-width: 768px) {
+    margin-top: 240px;
+  }
+
+  h2 {
+    background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.76) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    width: 668px;
+    max-width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    z-index: 3;
+  }
+
+  .frameworks-container {
+    width: 100%;
+    background-color: rgba(38, 38, 38, 0.15);
+    position: relative;
+    margin-top: -20px;
+    overflow: hidden;
+
+    @media (min-width: 840px) {
+      mask-image: linear-gradient(
+        90deg,
+        transparent 0%,
+        #ffffff 300px,
+        #ffffff calc(100vw - 300px),
+        transparent 100%
+      );
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 80px;
+      background: linear-gradient(
+        0deg,
+        rgba(23, 23, 23, 0) 0%,
+        rgba(16, 16, 16, 0.7) 50%,
+        #101010 100%
+      );
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100px;
+      background: linear-gradient(
+        180deg,
+        rgba(23, 23, 23, 0) 0%,
+        rgba(16, 16, 16, 0.7) 50%,
+        #101010 100%
+      );
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 2;
+      pointer-events: none;
+    }
+  }
+
+  .framework-row {
+    display: grid;
+    grid-auto-columns: 96px;
+    grid-gap: 24px;
+    justify-content: flex-start;
+    margin-bottom: 24px;
+    position: relative;
+    white-space: nowrap;
+    grid-auto-flow: column;
+
+    &:nth-child(even) {
+      --row-offset: 36px;
+    }
+
+    &:nth-child(odd) {
+      --row-offset: 12px;
+    }
+
+    @media (min-width: 1080px) {
+      &:nth-child(even) {
+        --row-offset: 24px;
+      }
+
+      &:nth-child(odd) {
+        --row-offset: -24px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/analog.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/analog.svg
new file mode 100644
index 00000000..2e7fe7d6
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/analog.svg	
@@ -0,0 +1,28 @@
+<svg width="56" height="40" viewBox="0 0 56 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_724_8546)">
+<mask id="mask0_724_8546" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="10" y="-1" width="46" height="41">
+<path d="M10.4961 -0.000732422H55.4788V39.2393H10.4961V-0.000732422Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_724_8546)">
+<path d="M32.9876 0L55.4788 39.2392H10.4961L32.9876 0Z" fill="#C30F2E"/>
+</g>
+<mask id="mask1_724_8546" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="5" width="40" height="35">
+<path d="M-0.00565527 5.84473H38.2772V39.3421H-0.00585938L-0.00565527 5.84473Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_724_8546)">
+<path d="M19.1351 5.84473L38.276 39.3421H-0.00585938L19.1349 5.84473" fill="#DD0330"/>
+</g>
+<path d="M51.6649 29.323H3.93164V28.7988H51.6649V29.323Z" fill="white"/>
+<mask id="mask2_724_8546" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="19" width="44" height="19">
+<path d="M5.94531 19.1233H48.8302V37.0686H5.94531V19.1233Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_724_8546)">
+<path d="M44.2906 36.9899C44.104 36.9899 43.9285 36.9123 43.7817 36.7657C42.905 35.8851 42.8668 32.304 42.9091 26.941C42.933 24.0105 42.9649 19.9963 42.4974 19.6795C42.0412 19.8686 41.9957 23.1847 41.966 25.38C41.9309 27.9343 41.8952 30.5772 41.4802 31.923C41.3567 32.3216 41.1972 32.6869 40.8764 32.6575C40.4242 32.6177 40.278 31.9036 39.9407 29.0862C39.8004 27.9161 39.6552 26.7065 39.4853 26.2383C39.4628 26.1793 39.4438 26.1321 39.4271 26.0955C39.2459 26.5048 39.037 27.6296 38.8918 28.4105C38.6907 29.4889 38.5009 30.5078 38.2632 30.9519C38.0797 31.2934 37.7885 31.7386 37.3817 31.6524C36.8272 31.536 36.6614 30.4183 36.6118 29.7626C36.6118 24.2456 35.8899 23.6035 35.7455 23.5308L35.7224 23.5484L35.6873 23.5404C35.1721 23.7654 35.1441 25.5548 35.1177 27.2849C35.0971 28.5541 35.0749 29.9923 34.8896 31.3381C34.6495 33.0827 34.3591 33.4192 33.9978 33.3986C33.1659 33.3418 33.1418 30.4765 33.1418 30.1502C33.1418 30.0481 33.1442 29.9276 33.1475 29.7944C33.1634 29.1277 33.192 27.8871 32.782 27.4962C32.7278 27.4444 32.6513 27.3845 32.5914 27.4015C32.2994 27.4748 31.9963 28.4232 31.8959 28.735C31.864 28.834 31.8385 28.9155 31.8168 28.9713C31.8001 29.0176 31.7787 29.083 31.7531 29.162C31.5322 29.8328 31.2808 30.502 30.8517 30.667C30.6929 30.7285 30.527 30.715 30.3714 30.6272C30.1648 30.51 29.9965 30.2707 29.8392 29.8727C29.7533 29.6525 29.68 29.4291 29.6048 29.2049C29.5139 28.9312 29.4206 28.6482 29.3048 28.3794C29.2139 28.1703 28.9875 28.0762 28.6987 28.1272C28.0987 28.2343 27.9983 28.8404 27.9137 29.753C27.8986 29.9117 27.8841 30.0675 27.8643 30.2141C27.8618 30.257 27.7556 31.5966 27.6878 32.0224C27.5004 33.1905 27.2539 33.6506 26.8446 33.6171C25.8348 33.5309 25.3715 29.1013 25.3962 27.2299C25.4152 25.8013 25.1568 25.2795 25.002 25.1966C24.9861 25.1892 24.9612 25.1757 24.9024 25.2172C24.7196 25.341 24.5568 25.7261 24.6071 26.1306C25.1632 30.5347 24.7531 35.5786 23.7488 36.7146C23.4322 37.072 23.0014 37.0673 22.7014 36.7657C21.8239 35.8849 21.7873 32.304 21.8288 26.941C21.8526 24.0105 21.8839 19.9963 21.4171 19.6795C20.9608 19.8686 20.9161 23.1847 20.8859 25.38C20.8508 27.9343 20.8148 30.5772 20.3993 31.923C20.2755 32.3216 20.116 32.6869 19.7962 32.6575C19.3431 32.6175 19.1979 31.9036 18.8597 29.0862C18.7192 27.9161 18.574 26.7065 18.4043 26.2383C18.3827 26.1793 18.3635 26.1321 18.3459 26.0955C18.1656 26.5048 17.9567 27.6296 17.8115 28.4105C17.6105 29.4889 17.4206 30.5078 17.1821 30.9519C16.9987 31.2934 16.7075 31.7386 16.3015 31.6524C15.7471 31.536 15.581 30.4183 15.5316 29.7626C15.5308 24.2456 14.8097 23.6035 14.6654 23.5308L14.6423 23.5484L14.6063 23.5404C14.0917 23.7654 14.0637 25.5546 14.0366 27.2849C14.0168 28.5541 13.9945 29.9923 13.8093 31.3381C13.5693 33.0827 13.2812 33.4225 12.9183 33.3986C12.0847 33.3418 12.0606 30.4765 12.0606 30.1502C12.0606 30.0481 12.0641 29.9276 12.0671 29.7944C12.0831 29.1277 12.1119 27.8871 11.7018 27.4962C11.6475 27.4444 11.5711 27.3845 11.5111 27.4013C11.219 27.4748 10.9152 28.4232 10.8163 28.7352C10.7845 28.8332 10.7573 28.9155 10.7373 28.9713C10.7142 29.034 10.6927 29.0974 10.6728 29.1612C10.4518 29.832 10.2004 30.502 9.77219 30.6673C9.6127 30.7285 9.44586 30.715 9.29107 30.6272C9.08461 30.51 8.91531 30.2707 8.75909 29.8727C8.67291 29.6525 8.59878 29.4291 8.52445 29.2049C8.43357 28.9312 8.33943 28.6482 8.22385 28.3794C8.13359 28.1703 7.9063 28.0762 7.61754 28.1272C6.92668 28.2502 6.76311 29.1069 6.6316 30.1296L6.60852 30.3113L6.08594 30.2419L6.11065 30.0634C6.2248 29.1667 6.39859 27.8113 7.52585 27.612C8.05619 27.5179 8.51975 27.738 8.70641 28.172C8.83159 28.4624 8.92981 28.756 9.02396 29.0407C9.09421 29.2551 9.16589 29.4697 9.2488 29.6819C9.39481 30.0522 9.50815 30.1479 9.55042 30.171C9.81447 30.0889 10.084 29.268 10.1733 28.9976C10.2012 28.9106 10.2253 28.8389 10.2443 28.7879C10.2627 28.7374 10.2866 28.6641 10.3154 28.5755C10.5531 27.8322 10.8515 27.0271 11.3812 26.8932C11.5431 26.8517 11.7937 26.8572 12.0655 27.1174C12.643 27.6688 12.6128 28.9553 12.5928 29.8073C12.5897 29.9349 12.5867 30.0513 12.5867 30.1504C12.5867 31.5096 12.7882 32.4596 12.9422 32.786C13.0218 32.6191 13.1585 32.2156 13.2885 31.267C13.4687 29.9525 13.4919 28.531 13.5111 27.2769C13.5461 25.0577 13.5708 23.4487 14.3741 23.0705C14.4938 22.9972 14.6925 22.9574 14.9022 23.0634C15.6793 23.4542 16.0565 25.6393 16.0565 29.7426C16.1053 30.3769 16.276 31.0444 16.4163 31.1402C16.4171 31.1259 16.5313 31.0557 16.7185 30.7046C16.9189 30.3321 17.1184 29.26 17.2938 28.3147C17.6822 26.2311 17.8586 25.4996 18.3181 25.4612C18.6681 25.4269 18.8301 25.8721 18.8981 26.0596C19.0894 26.5844 19.2314 27.7691 19.3815 29.0239C19.4987 29.997 19.6653 31.3867 19.8352 31.9491C19.8536 31.8997 19.8744 31.8407 19.8967 31.768C20.29 30.4941 20.326 27.8912 20.3603 25.3728C20.408 21.8746 20.4695 19.7075 21.1077 19.2552C21.2496 19.1547 21.4228 19.1298 21.5917 19.1866C22.3391 19.4347 22.3967 21.6259 22.3544 26.9459C22.3242 30.8035 22.2866 35.6049 23.0747 36.3963C23.1433 36.4657 23.1921 36.4657 23.2094 36.4657C23.2462 36.4657 23.2989 36.4306 23.3548 36.3677C24.1525 35.4655 24.6573 30.7277 24.0855 26.1968C24.0145 25.6328 24.2321 25.0401 24.604 24.7849C24.809 24.6436 25.0451 24.6254 25.2493 24.7346C25.7143 24.9817 25.9402 25.8235 25.9218 27.2371C25.8891 29.7052 26.4818 32.5936 26.8687 33.0547C26.93 32.9526 27.0513 32.6726 27.1677 31.9397C27.2331 31.5343 27.3409 30.1726 27.3425 30.159C27.3617 30.005 27.376 29.8559 27.3895 29.7044C27.4693 28.854 27.5674 27.7962 28.606 27.612C29.1357 27.5179 29.5993 27.7372 29.7868 28.172C29.9119 28.4624 30.0093 28.756 30.1033 29.0407C30.1752 29.2551 30.247 29.4697 30.33 29.6819C30.475 30.0522 30.5893 30.1479 30.6306 30.171C30.8946 30.0889 31.1652 29.268 31.2536 28.9984C31.2822 28.9114 31.3063 28.8387 31.3247 28.7877C31.3439 28.7383 31.367 28.6641 31.3949 28.5755C31.6335 27.8322 31.9318 27.0271 32.4622 26.8932C32.6225 26.8517 32.8738 26.8572 33.1459 27.1174C33.7234 27.6686 33.6932 28.9553 33.674 29.8073C33.6699 29.9216 33.6675 30.036 33.6668 30.1504C33.6668 31.5096 33.8686 32.4596 34.0225 32.786C34.1016 32.6191 34.238 32.2156 34.3695 31.267C34.5498 29.9525 34.5713 28.531 34.5921 27.2769C34.6264 25.0577 34.6511 23.4487 35.4545 23.0705C35.574 22.9972 35.7727 22.9574 35.9834 23.0634C36.7594 23.4542 37.1376 25.6391 37.1376 29.7426C37.1862 30.3769 37.3569 31.0444 37.4966 31.1402C37.4983 31.1259 37.6106 31.0557 37.7997 30.7046C37.9998 30.3321 38.1985 29.26 38.3748 28.3147C38.7617 26.2311 38.9388 25.4996 39.3983 25.4612C39.7493 25.4269 39.9113 25.8721 39.979 26.0596C40.1696 26.5844 40.3117 27.7691 40.463 29.0239C40.5788 29.997 40.7457 31.3867 40.9164 31.9491C40.934 31.8997 40.9546 31.8407 40.977 31.768C41.3702 30.4941 41.4053 27.8912 41.4404 25.3728C41.4874 21.8746 41.5497 19.7075 42.1878 19.2552C42.2571 19.2057 42.3373 19.1737 42.4215 19.1617C42.5058 19.1498 42.5917 19.1583 42.672 19.1866C43.4203 19.4347 43.4778 21.6259 43.4347 26.9459C43.4043 30.8035 43.367 35.6049 44.1542 36.3963C44.2244 36.4657 44.2722 36.4657 44.2906 36.4657C44.3266 36.4657 44.3792 36.4306 44.4342 36.3677C45.2335 35.4655 45.7377 30.7277 45.1657 26.1968C45.0915 25.6066 45.259 25.0114 45.5645 24.7824C45.7185 24.666 45.9059 24.6421 46.0783 24.7146C46.5235 24.9045 46.8249 25.7181 47.0005 27.2036C47.0738 27.8256 47.1394 28.4983 47.2023 29.162C47.3412 30.6105 47.5292 32.5626 47.7839 32.9916C47.8619 32.892 48.0216 32.6224 48.2585 31.8997L48.7586 32.0631C48.391 33.1807 48.1029 33.602 47.7279 33.5589C47.1449 33.4942 46.9764 32.3161 46.6789 29.2122C46.616 28.5516 46.5513 27.8832 46.4779 27.264C46.2545 25.3695 45.8749 25.198 45.8708 25.1964C45.7967 25.2339 45.6243 25.6281 45.6882 26.1306C46.2427 30.5347 45.8343 35.5796 44.8291 36.7146C44.6672 36.8972 44.4852 36.9897 44.2906 36.9897" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_724_8546">
+<rect width="55.4846" height="39.3421" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/angular.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/angular.svg
new file mode 100644
index 00000000..b6eb20ab
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/angular.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 271"><defs><linearGradient id="logosAngularIcon0" x1="25.071%" x2="96.132%" y1="90.929%" y2="55.184%"><stop offset="0%" stop-color="#E40035"/><stop offset="24%" stop-color="#F60A48"/><stop offset="35.2%" stop-color="#F20755"/><stop offset="49.4%" stop-color="#DC087D"/><stop offset="74.5%" stop-color="#9717E7"/><stop offset="100%" stop-color="#6C00F5"/></linearGradient><linearGradient id="logosAngularIcon1" x1="21.863%" x2="68.367%" y1="12.058%" y2="68.21%"><stop offset="0%" stop-color="#FF31D9"/><stop offset="100%" stop-color="#FF5BE1" stop-opacity="0"/></linearGradient></defs><path fill="url(#logosAngularIcon0)" d="m256 45.179l-9.244 145.158L158.373 0zm-61.217 187.697l-66.782 38.105l-66.784-38.105L74.8 199.958h106.4zM128.001 72.249l34.994 85.076h-69.99zM9.149 190.337L0 45.179L97.627 0z"/><path fill="url(#logosAngularIcon1)" d="m256 45.179l-9.244 145.158L158.373 0zm-61.217 187.697l-66.782 38.105l-66.784-38.105L74.8 199.958h106.4zM128.001 72.249l34.994 85.076h-69.99zM9.149 190.337L0 45.179L97.627 0z"/></svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/astro.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/astro.svg
new file mode 100644
index 00000000..bbe512ed
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/astro.svg	
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="41" height="50" viewBox="0 0 41 50" fill="none">
+  <g clip-path="url(#clip0_724_8504)">
+    <path d="M12.6534 41.7267C10.2003 39.5139 9.48427 34.8645 10.5063 31.4961C12.2784 33.6198 14.7338 34.2925 17.2771 34.6723C21.2034 35.2583 25.0593 35.0391 28.7067 33.2682C29.1239 33.0655 29.5095 32.7958 29.9655 32.5228C30.3077 33.5026 30.3967 34.4918 30.2772 35.4986C29.9865 37.9505 28.7501 39.8444 26.7834 41.2802C25.997 41.8544 25.1648 42.3678 24.3526 42.9093C21.8574 44.5736 21.1822 46.525 22.1199 49.3637C22.1422 49.4328 22.1621 49.502 22.2125 49.6707C20.9385 49.1082 20.0079 48.2889 19.2988 47.2118C18.5499 46.075 18.1936 44.8174 18.1748 43.4567C18.1655 42.7944 18.1655 42.1264 18.0752 41.4736C17.8549 39.882 17.0977 39.1694 15.6714 39.1283C14.2076 39.0862 13.0496 39.9793 12.7425 41.3856C12.7191 41.4935 12.6851 41.6001 12.6511 41.7255L12.6534 41.7267Z" fill="white"/>
+    <path d="M0.316406 32.5273C0.316406 32.5273 7.02394 29.2679 13.7502 29.2679L18.8216 13.612C19.0114 12.8548 19.5658 12.3403 20.1917 12.3403C20.8175 12.3403 21.3719 12.8548 21.5618 13.612L26.6331 29.2679C34.5994 29.2679 40.0669 32.5273 40.0669 32.5273C40.0669 32.5273 28.6736 1.567 28.6513 1.50489C28.3244 0.58953 27.7724 0 27.0281 0H13.3564C12.6122 0 12.0824 0.58953 11.7331 1.50489C11.7085 1.56583 0.316406 32.5273 0.316406 32.5273Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8504">
+      <rect width="40.5063" height="50" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/ember.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/ember.svg
new file mode 100644
index 00000000..4f1e6889
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/ember.svg	
@@ -0,0 +1,6 @@
+<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M64 0c35.346 0 64 28.654 64 64 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64C0 28.654 28.654 0 64 0z" fill="#E04E39" fill-rule="nonzero"/>
+    <path d="M65.265 24.128c8.246-.163 14.073 2.073 19.087 9.19 10.934 27.109-28.147 41.1-29.714 41.65l-.049.016s-1.18 7.363 10.028 7.08c13.793 0 28.294-10.691 33.81-15.21a3.293 3.293 0 0 1 4.468.265l4.13 4.29a3.291 3.291 0 0 1 .085 4.491c-3.59 3.997-12.014 12.203-24.696 17.504 0 0-21.16 9.798-35.42.52-8.503-5.53-10.842-12.151-11.793-19.038.005 0-10.324-.524-16.957-3.114-6.635-2.592.049-10.411.049-10.411s2.04-3.233 5.92 0c3.883 3.228 11.13 1.772 11.13 1.772.646-5.099 1.72-11.828 4.884-18.93 6.632-14.885 16.789-19.915 25.038-20.075zm4.853 14.915c-4.369-4.21-16.984 4.202-17.471 23.45 0 0 3.724 1.134 11.97-4.53 8.25-5.661 9.87-14.718 5.501-18.92z" fill="#FFFFFF"/>
+  </g>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/laravel.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/laravel.svg
new file mode 100644
index 00000000..a8d8fb19
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/laravel.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 264"><path fill="#FF2D20" d="M255.856 59.62c.095.351.144.713.144 1.077v56.568c0 1.478-.79 2.843-2.073 3.578L206.45 148.18v54.18a4.135 4.135 0 0 1-2.062 3.579l-99.108 57.053c-.227.128-.474.21-.722.299c-.093.03-.18.087-.278.113a4.15 4.15 0 0 1-2.114 0c-.114-.03-.217-.093-.325-.134c-.227-.083-.464-.155-.68-.278L2.073 205.938A4.128 4.128 0 0 1 0 202.36V32.656c0-.372.052-.733.144-1.083c.031-.119.103-.227.145-.346c.077-.216.15-.438.263-.639c.077-.134.19-.242.283-.366c.119-.165.227-.335.366-.48c.119-.118.274-.206.408-.309c.15-.124.283-.258.453-.356h.005L51.613.551a4.135 4.135 0 0 1 4.125 0l49.546 28.526h.01c.165.104.305.232.454.351c.134.103.284.196.402.31c.145.149.248.32.371.484c.088.124.207.232.279.366c.118.206.185.423.268.64c.041.118.113.226.144.35c.095.351.144.714.145 1.078V138.65l41.286-23.773V60.692c0-.36.052-.727.145-1.072c.036-.124.103-.232.144-.35c.083-.217.155-.44.268-.64c.077-.134.19-.242.279-.366c.123-.165.226-.335.37-.48c.12-.118.269-.206.403-.309c.155-.124.289-.258.454-.356h.005l49.551-28.526a4.13 4.13 0 0 1 4.125 0l49.546 28.526c.175.103.309.232.464.35c.128.104.278.197.397.31c.144.15.247.32.37.485c.094.124.207.232.28.366c.118.2.185.423.267.64c.047.118.114.226.145.35Zm-8.115 55.258v-47.04l-17.339 9.981l-23.953 13.792v47.04l41.297-23.773h-.005Zm-49.546 85.095V152.9l-23.562 13.457l-67.281 38.4v47.514l90.843-52.3ZM8.259 39.796v160.177l90.833 52.294v-47.505L51.64 177.906l-.015-.01l-.02-.01c-.16-.093-.295-.227-.444-.34c-.13-.104-.279-.186-.392-.3l-.01-.015c-.134-.129-.227-.289-.34-.433c-.104-.14-.227-.258-.31-.402l-.005-.016c-.093-.154-.15-.34-.217-.515c-.067-.155-.154-.3-.196-.464v-.005c-.051-.196-.061-.403-.082-.604c-.02-.154-.062-.309-.062-.464V63.57L25.598 49.772l-17.339-9.97v-.006ZM53.681 8.893L12.399 32.656l41.272 23.762L94.947 32.65L53.671 8.893h.01Zm21.468 148.298l23.948-13.786V39.796L81.76 49.778L57.805 63.569v103.608l17.344-9.986ZM202.324 36.935l-41.276 23.762l41.276 23.763l41.271-23.768l-41.27-23.757Zm-4.13 54.676l-23.953-13.792l-17.338-9.981v47.04l23.948 13.787l17.344 9.986v-47.04Zm-94.977 106.006l60.543-34.564l30.264-17.272l-41.246-23.747l-47.489 27.34l-43.282 24.918l41.21 23.325Z"></path></svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/marko.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/marko.svg
new file mode 100644
index 00000000..44c26273
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/marko.svg	
@@ -0,0 +1,64 @@
+<svg width="60" height="50" viewBox="0 0 60 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8599)">
+    <path d="M29.9375 8.17749H38.372C35.2646 13.2709 31.83 18.8784 28.3954 24.4625H19.9608C23.3954 18.8784 26.83 13.2709 29.9375 8.17749Z" fill="#8DC220"/>
+    <path d="M9.98445 8.17749H18.419C16.7601 10.8878 15.0779 13.6214 13.419 16.3317L8.44239 24.4625C10.1013 27.1728 11.7601 29.9065 13.419 32.6167C15.0779 35.327 16.7368 38.0373 18.419 40.7476H9.98445C8.32557 38.0373 6.64333 35.327 4.98445 32.6167C3.32557 29.9298 1.66669 27.1962 0.0078125 24.4859L4.98445 16.3551C6.64333 13.6214 8.32557 10.9111 9.98445 8.17749Z" fill="#44BFEF"/>
+    <path d="M9.98413 8.17749C13.4187 13.785 16.8533 19.3924 19.9608 24.4625H28.3953C25.2879 19.3924 21.8533 13.785 18.4187 8.17749H9.98413Z" fill="#00AC71"/>
+    <path d="M38.372 8.17749H29.9374C31.5963 10.8878 33.2552 13.6214 34.9374 16.3317C36.5963 19.042 38.2552 21.7523 39.9374 24.4625C38.2786 27.1728 36.5963 29.9065 34.9374 32.6167C33.2786 35.327 31.6197 38.0373 29.9374 40.7476H38.372C40.0309 38.0373 41.6898 35.327 43.372 32.6167C45.0309 29.9065 46.6898 27.1962 48.372 24.4625C46.6898 21.7523 45.0309 19.042 43.372 16.3317C41.7131 13.6214 40.0309 10.9111 38.372 8.17749Z" fill="#F9BC00"/>
+    <path d="M34.8907 13.9253H26.4561C25.3813 15.6776 24.3066 17.4533 23.2318 19.2057C22.157 20.958 21.0823 22.7337 19.9841 24.486H28.4187C29.4935 22.7337 30.5916 20.958 31.6664 19.2057C32.7178 17.43 33.7925 15.6776 34.8907 13.9253Z" fill="url(#paint0_linear_724_8599)"/>
+    <path d="M23.4883 18.7382H31.9229C32.9976 16.9859 34.0724 15.2102 35.1472 13.4579C36.2219 11.7055 37.2967 9.92983 38.3715 8.17749H29.9369C28.8621 9.92983 27.7873 11.7055 26.7126 13.4579C25.6378 15.2336 24.563 16.9859 23.4883 18.7382Z" fill="url(#paint1_linear_724_8599)"/>
+    <path d="M44.844 18.7382H36.4094C35.3346 16.9859 34.2365 15.2102 33.1617 13.4579C32.087 11.7055 31.0122 9.92983 29.9374 8.17749H38.372C39.4468 9.92983 40.5215 11.7055 41.5963 13.4579C42.6944 15.2336 43.7692 16.9859 44.844 18.7382Z" fill="url(#paint2_linear_724_8599)"/>
+    <path d="M49.8212 8.17749H41.3866C43.0455 10.9111 44.7044 13.6214 46.3633 16.3317C48.0222 19.042 49.7044 21.7523 51.3633 24.4625C49.7044 27.1728 48.0222 29.9065 46.3633 32.6167C44.7044 35.327 43.0455 38.0373 41.3633 40.7476H49.7979C51.4567 38.0373 53.1156 35.327 54.7979 32.6167C56.4567 29.9065 58.1156 27.1962 59.7979 24.4625C58.139 21.7523 56.4801 19.042 54.7979 16.3317C53.1623 13.6214 51.4801 10.9111 49.8212 8.17749Z" fill="#DF1B1C"/>
+    <path d="M56.2933 18.7382H47.8587C46.7606 16.9859 45.6858 15.2102 44.611 13.4579C43.5362 11.7055 42.4615 9.92983 41.3867 8.17749H49.8213C50.8961 9.92983 51.9708 11.7055 53.0456 13.4579C54.1204 15.2336 55.2185 16.9859 56.2933 18.7382Z" fill="url(#paint3_linear_724_8599)"/>
+    <path d="M44.9141 35.0467H53.3486C54.4234 33.2944 55.4982 31.542 56.5729 29.7663C57.6477 28.014 58.7225 26.2383 59.8206 24.486H51.3627C50.2879 26.2383 49.2131 28.014 48.1384 29.7663C47.0636 31.5187 45.9888 33.271 44.9141 35.0467Z" fill="url(#paint4_linear_724_8599)"/>
+    <path d="M33.4648 35.0468H41.8994C42.9742 33.2945 44.049 31.5188 45.1237 29.7665C46.1985 28.0141 47.2733 26.2384 48.3714 24.4861H39.9368C38.862 26.2384 37.7873 28.0141 36.7125 29.7665C35.6144 31.5188 34.5396 33.2711 33.4648 35.0468Z" fill="url(#paint5_linear_724_8599)"/>
+    <path d="M14.9144 13.9253H6.47978C5.40501 15.6776 4.33024 17.4533 3.25548 19.2057C2.15735 20.958 1.08258 22.7337 0.0078125 24.486H8.44239C9.51716 22.7337 10.5919 20.9814 11.6667 19.2057C12.7415 17.4533 13.8162 15.6776 14.9144 13.9253Z" fill="url(#paint6_linear_724_8599)"/>
+    <path d="M3.51172 18.7382H11.9463C13.0211 16.9859 14.0958 15.2102 15.1706 13.4579C16.2687 11.7055 17.3435 9.92983 18.4183 8.17749H9.98368C8.90892 9.92983 7.83415 11.6822 6.75938 13.4579C5.68462 15.2102 4.60985 16.9859 3.51172 18.7382Z" fill="url(#paint7_linear_724_8599)"/>
+    <path d="M3.51172 30.2102H11.9463C13.0211 31.9625 14.0958 33.7382 15.1706 35.4906C16.2454 37.2429 17.3201 39.0186 18.3949 40.771H9.96032C8.88555 39.0186 7.78742 37.2663 6.71265 35.4906C5.66125 33.7382 4.58649 31.9859 3.51172 30.2102Z" fill="url(#paint8_linear_724_8599)"/>
+    <path d="M24.8907 18.7382H16.4561C15.3813 16.9859 14.3066 15.2102 13.2318 13.4579C12.1337 11.7055 11.0589 9.92983 9.98413 8.17749H18.4187C19.4935 9.92983 20.5682 11.6822 21.643 13.4579C22.7411 15.2102 23.8159 16.9859 24.8907 18.7382Z" fill="url(#paint9_linear_724_8599)"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear_724_8599" x1="763.985" y1="1069.03" x2="763.985" y2="12.9748" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8AC23E"/>
+      <stop offset="1" stop-color="#8AC23E" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_724_8599" x1="767.409" y1="8.85338" x2="767.409" y2="1064.91" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#698932"/>
+      <stop offset="1" stop-color="#698932" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_724_8599" x1="776.159" y1="8.85338" x2="776.159" y2="1064.91" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFED01"/>
+      <stop offset="1" stop-color="#FFED01" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_724_8599" x1="786.967" y1="8.85338" x2="786.967" y2="1065.23" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E02A89"/>
+      <stop offset="1" stop-color="#E02A89" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_724_8599" x1="789.69" y1="23.5144" x2="789.69" y2="1079.58" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7F1E4F"/>
+      <stop offset="1" stop-color="#7F1E4F" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_724_8599" x1="778.27" y1="23.5145" x2="778.27" y2="1079.58" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E95506"/>
+      <stop offset="1" stop-color="#E95506" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_724_8599" x1="744.992" y1="1069.03" x2="744.992" y2="13.6401" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#88D0F1"/>
+      <stop offset="1" stop-color="#88D0F1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_724_8599" x1="749.152" y1="8.85338" x2="749.152" y2="1064.24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00828B"/>
+      <stop offset="0.8325" stop-color="#00828B" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint8_linear_724_8599" x1="748.831" y1="1086.02" x2="748.831" y2="30.9601" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2073BA"/>
+      <stop offset="1" stop-color="#2073BA" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint9_linear_724_8599" x1="755.58" y1="8.85338" x2="755.58" y2="1064.24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8ED0E1"/>
+      <stop offset="1" stop-color="#88D0F1" stop-opacity="0"/>
+    </linearGradient>
+    <clipPath id="clip0_724_8599">
+      <rect width="59.8281" height="50" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/nuxt.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/nuxt.svg
new file mode 100644
index 00000000..fb2de2c6
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/nuxt.svg	
@@ -0,0 +1,10 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8513)">
+    <path d="M28.0504 41.6666H46.6376C47.2279 41.6666 47.8079 41.5126 48.3192 41.2201C48.8304 40.9275 49.2549 40.5066 49.55 39.9999C49.8451 39.493 50.0003 38.9182 50 38.3331C49.9997 37.748 49.8441 37.1733 49.5485 36.6667L37.0659 15.2382C36.7709 14.7315 36.3465 14.3108 35.8353 14.0182C35.3242 13.7257 34.7443 13.5716 34.1541 13.5716C33.5638 13.5716 32.9839 13.7257 32.4728 14.0182C31.9617 14.3108 31.5372 14.7315 31.2422 15.2382L28.0504 20.721L21.8101 9.99953C21.5148 9.49292 21.0902 9.0722 20.5789 8.7797C20.0676 8.48725 19.4876 8.33325 18.8973 8.33325C18.3069 8.33325 17.727 8.48725 17.2157 8.7797C16.7044 9.0722 16.2798 9.49292 15.9845 9.99953L0.451472 36.6667C0.155968 37.1733 0.000257186 37.748 3.18321e-07 38.3331C-0.000256549 38.9182 0.154949 39.493 0.450008 39.9999C0.745067 40.5066 1.16957 40.9275 1.68083 41.2201C2.19209 41.5126 2.77207 41.6666 3.36244 41.6666H15.0299C19.6527 41.6666 23.0618 39.6541 25.4076 35.7278L31.1027 25.9524L34.1532 20.721L43.3082 36.4351H31.1027L28.0504 41.6666ZM14.8397 36.4298L6.69728 36.4279L18.9027 15.4769L24.9928 25.9524L20.9152 32.9541C19.3574 35.5016 17.5876 36.4298 14.8397 36.4298Z" fill="#00DC82"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8513">
+      <rect width="50" height="50" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/playwright.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/playwright.svg
new file mode 100644
index 00000000..63ef7c4c
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/playwright.svg	
@@ -0,0 +1,16 @@
+<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8573)">
+    <path d="M18.2499 22.5728C16.2594 23.1377 14.9534 24.1282 14.0931 25.1178C14.9172 24.3969 16.0209 23.7349 17.5096 23.3129C19.0325 22.8813 20.3316 22.8844 21.4052 23.0917V22.2523C20.4893 22.1685 19.4395 22.2352 18.2499 22.5728ZM14.0021 15.5164L6.60966 17.4639C6.60966 17.4639 6.74422 17.6543 6.99376 17.9082L13.2618 16.2564C13.2618 16.2564 13.1729 17.401 12.4016 18.4248C13.8607 17.321 14.0021 15.5164 14.0021 15.5164ZM20.1904 32.8904C9.78681 35.6924 4.28277 23.6358 2.6164 17.3781C1.84654 14.4895 1.51035 12.3019 1.42078 10.8901C1.41226 10.7624 1.414 10.6342 1.42599 10.5068C0.886497 10.5391 0.628 10.8197 0.680491 11.6306C0.770059 13.0414 1.10625 15.2289 1.87611 18.1184C3.54186 24.3752 9.04652 36.4319 19.4501 33.6298C21.7145 33.0197 23.4157 31.9087 24.6929 30.4902C23.5156 31.5533 22.0426 32.3905 20.1904 32.8904ZM22.1451 8.13745V8.87795H26.2256C26.1421 8.6157 26.0577 8.37949 25.974 8.13745H22.1451Z" fill="#2D4552"/>
+    <path d="M27.1391 14.2353C28.9742 14.7566 29.9449 16.0433 30.4579 17.1818L32.5042 17.763C32.5042 17.763 32.2251 13.7778 28.6205 12.7541C25.2484 11.7959 23.1733 14.6277 22.9209 14.9941C23.902 14.2952 25.3342 13.723 27.1391 14.2353ZM43.4273 17.2001C40.052 16.2378 37.9778 19.0754 37.7291 19.4366C38.7108 18.7386 40.1424 18.1662 41.9465 18.6807C43.7789 19.2027 44.7485 20.4879 45.2632 21.6273L47.3122 22.2105C47.3122 22.2105 47.0287 18.2248 43.4273 17.2001ZM41.3943 27.7073L24.3727 22.9487C24.3727 22.9487 24.5571 23.8829 25.264 25.0927L39.5955 29.0991C40.7752 28.4165 41.3943 27.7073 41.3943 27.7073ZM29.5933 37.95C16.1154 34.3365 17.7447 17.1641 19.9256 9.02679C20.8235 5.67321 21.7467 3.18074 22.5124 1.50978C22.0556 1.41584 21.6771 1.65642 21.3035 2.4167C20.4903 4.06516 19.4509 6.74948 18.4452 10.5072C16.265 18.6445 14.6355 35.8165 28.1127 39.43C34.4651 41.1318 39.414 38.5454 43.103 34.4831C39.6015 37.6547 35.1306 39.4329 29.5933 37.95Z" fill="#2D4552"/>
+    <path d="M22.1463 28.8661V25.4007L12.5182 28.1311C12.5182 28.1311 13.2295 23.9972 18.2509 22.5729C19.7738 22.1413 21.0731 22.1442 22.1463 22.3515V8.1375H26.9673C26.4424 6.51549 25.9346 5.26675 25.508 4.39899C24.8025 2.96278 24.0793 3.9149 22.4375 5.2882C21.281 6.25428 18.3584 8.31538 13.9602 9.50038C9.56224 10.6864 6.00641 10.3719 4.52292 10.1149C2.41975 9.752 1.31973 9.29 1.42263 10.8899C1.5122 12.3009 1.84818 14.4887 2.61826 17.378C4.2838 23.635 9.78866 35.6914 20.1922 32.8894C22.9097 32.1572 24.8277 30.7098 26.1572 28.8651H22.1463V28.8659V28.8661ZM6.60985 17.464L14.0031 15.5164C14.0031 15.5164 13.7878 18.3605 11.0162 19.0912C8.24373 19.8211 6.60985 17.464 6.60985 17.464Z" fill="#E2574C"/>
+    <path d="M49.9713 8.30195C48.0495 8.63876 43.4389 9.05848 37.7409 7.53125C32.0413 6.00485 28.2599 3.33532 26.7616 2.08054C24.6376 0.301688 23.7034 -0.934761 22.784 0.935327C21.9712 2.58462 20.9316 5.26894 19.9255 9.02682C17.7455 17.1641 16.116 34.3359 29.5932 37.9495C43.0673 41.5599 50.2408 25.8728 52.4211 17.7349C53.4271 13.9778 53.8683 11.1329 53.9895 9.29844C54.1281 7.22047 52.7006 7.8237 49.9713 8.30195ZM22.8935 15.0343C22.8935 15.0343 25.0173 11.7309 28.6196 12.7549C32.2242 13.7787 32.5033 17.7636 32.5033 17.7636L22.8935 15.0343ZM31.6868 29.8573C25.3506 28.0014 24.3735 22.9487 24.3735 22.9487L41.3943 27.7075C41.3943 27.7067 37.9586 31.6901 31.6868 29.8571V29.8573ZM37.7045 19.4737C37.7045 19.4737 39.8256 16.1729 43.4272 17.1996C47.0287 18.225 47.3122 22.2099 47.3122 22.2099L37.7047 19.4737H37.7045Z" fill="#2EAD33"/>
+    <path d="M18.7802 26.3551L12.5167 28.1302C12.5167 28.1302 13.197 24.254 17.8112 22.718L14.2648 9.40747L13.9584 9.50058C9.56017 10.6866 6.00454 10.3721 4.52105 10.1151C2.41788 9.75241 1.31766 9.2902 1.42056 10.8903C1.51012 12.3013 1.84632 14.4889 2.61618 17.3782C4.28193 23.6352 9.7868 35.6916 20.1902 32.8896L20.4966 32.7934L18.7804 26.3549L18.7802 26.3551ZM6.6084 17.464L14.0017 15.5162C14.0017 15.5162 13.7863 18.3603 11.0147 19.091C8.24227 19.8208 6.6084 17.464 6.6084 17.464Z" fill="#D65348"/>
+    <path d="M31.9726 29.927L31.686 29.8572C25.3498 28.0013 24.3727 22.9488 24.3727 22.9488L33.1497 25.4021L37.7963 7.5461L37.7401 7.53152C32.0407 6.00491 28.2593 3.33538 26.7608 2.08039C24.637 0.301539 23.7026 -0.934702 22.7832 0.935386C21.9712 2.58468 20.9316 5.269 19.9255 9.02688C17.7455 17.1642 16.116 34.336 29.5932 37.9493L29.8694 38.0118L31.9726 29.927ZM22.8935 15.0342C22.8935 15.0342 25.0173 11.7308 28.6196 12.7548C32.2242 13.7785 32.5033 17.7635 32.5033 17.7635L22.8935 15.0342Z" fill="#1D8D22"/>
+    <path d="M19.1005 26.264L17.4207 26.7408C17.8178 28.9779 18.5172 31.1248 19.6149 33.0213C19.8062 32.9793 19.9957 32.943 20.1903 32.8897C20.7004 32.7522 21.1734 32.5816 21.6288 32.3958C20.4019 30.5753 19.5904 28.479 19.1005 26.264ZM18.4447 10.5076C17.5816 13.7293 16.8092 18.3666 17.0219 23.0179C17.4022 22.8527 17.8042 22.6988 18.2508 22.5721L18.5616 22.5026C18.1825 17.5343 19.0019 12.4716 19.9251 9.02702C20.144 8.21004 20.3782 7.39726 20.6277 6.58911C20.2212 6.84909 19.8062 7.0955 19.3833 7.32794C19.043 8.37952 18.73 9.43976 18.4447 10.5076Z" fill="#C04B41"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8573">
+      <rect width="53.3281" height="39.993" fill="white" transform="translate(0.671875 0.00341797)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/qwik.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/qwik.svg
new file mode 100644
index 00000000..606a2b7c
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/qwik.svg	
@@ -0,0 +1,12 @@
+<svg width="49" height="50" viewBox="0 0 49 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8695)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.7037 44.1171L42.3042 49.5404L33.7455 41.5849L12.9611 22.265L17.8208 17.4058L15.5835 1.97827L1.21855 19.237C0.136763 21.1107 0.136785 23.4193 1.21861 25.293L10.3387 41.0891C11.4206 42.9629 13.4198 44.1171 15.5834 44.1171H24.7037Z" fill="#18B6F6"/>
+    <path d="M33.8232 0.411987L15.5828 0.411989C13.4192 0.411989 11.42 1.56627 10.3382 3.44003L1.2179 19.2371L15.5828 1.97833L36.4456 22.2651L32.5583 26.1526L33.7449 41.5849L42.3035 49.5405C42.7971 49.6925 43.23 49.1754 42.9938 48.7163L39.0679 41.0892L48.188 25.2931C49.2699 23.4194 49.2699 21.1108 48.1881 19.2371L39.0678 3.44002C37.9861 1.56627 35.9869 0.411987 33.8232 0.411987Z" fill="#AC7EF4"/>
+    <path d="M36.4452 22.265L15.5824 1.97827L17.8198 17.4058L12.9601 22.265L33.7445 41.5849L32.558 26.1525L36.4452 22.265Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8695">
+      <rect width="48.5929" height="49.176" fill="white" transform="translate(0.406372 0.412109)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/react.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/react.svg
new file mode 100644
index 00000000..c4fcecce
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/react.svg	
@@ -0,0 +1,10 @@
+<svg width="50" height="46" viewBox="0 0 50 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8679)">
+    <path d="M41.1348 15.1752C40.6041 14.9932 40.069 14.8245 39.5299 14.6694C39.6205 14.2994 39.7038 13.9338 39.7779 13.5747C40.9928 7.67706 40.1985 2.92584 37.4857 1.36151C34.8846 -0.138163 30.6308 1.42558 26.3348 5.16443C25.9114 5.53357 25.4974 5.91335 25.0932 6.3034C24.8226 6.04403 24.5472 5.78969 24.2672 5.54052C19.7647 1.54283 15.2516 -0.142058 12.5417 1.42675C9.94301 2.9311 9.1735 7.39758 10.2673 12.9869C10.3761 13.5404 10.499 14.0911 10.6358 14.6384C9.99696 14.82 9.38053 15.0132 8.7906 15.2188C3.51176 17.0593 0.140625 19.9436 0.140625 22.9353C0.140625 26.0252 3.7597 29.1245 9.25783 31.0037C9.70358 31.1555 10.153 31.2961 10.6058 31.4254C10.4587 32.0149 10.3282 32.6084 10.2143 33.2051C9.17155 38.6974 9.98586 43.0583 12.5776 44.5532C15.2544 46.0968 19.7471 44.5103 24.1217 40.6861C24.4764 40.3752 24.8233 40.0555 25.1621 39.7273C25.5999 40.1497 26.0493 40.5598 26.5099 40.9571C30.7475 44.6034 34.9326 46.0758 37.5217 44.5769C40.196 43.0287 41.0652 38.3439 39.9368 32.6442C39.8479 32.1977 39.7482 31.7534 39.6378 31.3117C39.9533 31.2182 40.263 31.122 40.5649 31.0219C46.2808 29.1282 49.9998 26.0665 49.9998 22.9353C49.9998 19.9327 46.5197 17.029 41.1348 15.1752ZM39.8951 29.0002C39.6224 29.0904 39.3428 29.1775 39.0576 29.2622C38.4266 27.2645 37.5751 25.1404 36.5329 22.9456C37.5274 20.8033 38.3462 18.7063 38.9595 16.7216C39.4695 16.8693 39.9644 17.0249 40.4416 17.1891C45.0555 18.7775 47.8698 21.1258 47.8698 22.9353C47.8698 24.8627 44.8304 27.3648 39.8951 29.0002ZM37.8474 33.0579C38.3464 35.5781 38.4174 37.8568 38.0869 39.6383C37.7901 41.2391 37.193 42.3062 36.4544 42.7337C34.8833 43.6432 31.5231 42.461 27.8991 39.3425C27.4707 38.9731 27.0526 38.5919 26.6454 38.1992C28.0504 36.6627 29.4545 34.8766 30.8248 32.8927C33.2352 32.6789 35.5124 32.3291 37.5774 31.8517C37.6769 32.2516 37.7669 32.6538 37.8474 33.0579ZM17.1387 42.5765C15.6036 43.1185 14.3809 43.1341 13.6417 42.708C12.069 41.801 11.4152 38.2993 12.307 33.6025C12.413 33.0474 12.5344 32.4955 12.671 31.9472C14.7133 32.399 16.9739 32.7239 19.3899 32.9198C20.7696 34.861 22.2142 36.6452 23.67 38.2076C23.3607 38.507 23.0439 38.7987 22.7202 39.0825C20.7856 40.7734 18.8471 41.9731 17.1387 42.5765ZM9.9469 28.9883C7.51569 28.1573 5.50788 27.0773 4.13169 25.8988C2.89495 24.8399 2.27074 23.7884 2.27074 22.9353C2.27074 21.1197 4.97735 18.804 9.49174 17.2302C10.0396 17.0393 10.613 16.8591 11.208 16.6901C11.832 18.7195 12.6504 20.8414 13.638 22.9871C12.6375 25.1646 11.8075 27.3204 11.1774 29.3738C10.7641 29.2554 10.3539 29.1269 9.9469 28.9883ZM12.3577 12.5777C11.4207 7.78905 12.0429 4.17679 13.609 3.27018C15.277 2.30454 18.9654 3.68132 22.853 7.13329C23.1065 7.35889 23.3559 7.58908 23.6011 7.82372C22.1525 9.37928 20.7211 11.1503 19.3537 13.08C17.0088 13.2973 14.7642 13.6463 12.7005 14.114C12.5733 13.6049 12.459 13.0925 12.3577 12.5777ZM33.8647 17.8884C33.3772 17.0465 32.8717 16.2151 32.3485 15.3949C33.9393 15.5961 35.4635 15.8631 36.8948 16.1895C36.4651 17.5669 35.9296 19.0068 35.2991 20.4831C34.8383 19.6087 34.36 18.7437 33.8647 17.8884ZM25.0941 9.34598C26.0765 10.4104 27.0605 11.5986 28.0282 12.8879C26.065 12.7952 24.0986 12.7948 22.1353 12.8868C23.1041 11.6093 24.0964 10.4226 25.0941 9.34598ZM16.2673 17.9031C15.7782 18.7514 15.3088 19.6111 14.8598 20.4813C14.2397 19.0103 13.7089 17.5638 13.2756 16.1669C14.6981 15.8487 16.2151 15.5885 17.7958 15.391C17.2667 16.2162 16.7571 17.0539 16.2673 17.9031ZM17.8412 30.6312C16.2081 30.4489 14.6683 30.2021 13.2462 29.8924C13.6863 28.4707 14.2288 26.9934 14.8623 25.4908C15.3132 26.3617 15.7844 27.2219 16.2757 28.0706C16.7809 28.9432 17.304 29.7978 17.8412 30.6312ZM25.153 36.6746C24.1433 35.5855 23.1364 34.3805 22.153 33.0846C23.1078 33.122 24.081 33.1411 25.0702 33.1411C26.0865 33.1411 27.091 33.1183 28.0799 33.0743C27.109 34.3936 26.1287 35.6003 25.153 36.6746ZM35.3192 25.4141C35.9856 26.9332 36.5473 28.4027 36.9933 29.8001C35.5478 30.13 33.987 30.3957 32.3424 30.593C32.8694 29.7576 33.3797 28.9117 33.8731 28.056C34.3746 27.1862 34.8568 26.3053 35.3192 25.4141ZM32.0281 26.9918C31.2728 28.3038 30.4751 29.5909 29.6362 30.851C28.1166 30.9587 26.5936 31.0121 25.0702 31.0113C23.5185 31.0113 22.0093 30.963 20.556 30.8688C19.6952 29.6115 18.8823 28.3222 18.1189 27.0035C17.3592 25.6918 16.6498 24.3517 15.9917 22.9862C16.6481 21.6203 17.3556 20.2795 18.1127 18.9668L18.1125 18.967C18.8693 17.654 19.6758 16.3702 20.5301 15.1183C22.0128 15.0062 23.5333 14.9477 25.07 14.9477C26.6137 14.9477 28.1363 15.0067 29.6187 15.1197C30.4643 16.3697 31.2656 17.6491 32.0211 18.9555C32.7807 20.2654 33.4976 21.5995 34.1705 22.956C33.5045 24.3263 32.7899 25.6724 32.0281 26.9918ZM36.4219 3.20668C38.0914 4.16959 38.7407 8.05256 37.6918 13.1446C37.6248 13.4695 37.5496 13.8004 37.4678 14.136C35.399 13.6584 33.1528 13.3034 30.8011 13.0827C29.4311 11.1318 28.0115 9.35805 26.5864 7.82255C26.9599 7.46253 27.3423 7.11185 27.7332 6.77083C31.4142 3.56758 34.8545 2.30279 36.4219 3.20668ZM25.0702 18.4831C27.5291 18.4831 29.5225 20.4764 29.5225 22.9353C29.5225 25.3942 27.5291 27.3876 25.0702 27.3876C22.6113 27.3876 20.6179 25.3942 20.6179 22.9353C20.6179 20.4764 22.6113 18.4831 25.0702 18.4831Z" fill="#00D8FF"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8679">
+      <rect width="49.8594" height="44.4058" fill="white" transform="translate(0.140625 0.797119)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/redwood.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/redwood.svg
new file mode 100644
index 00000000..2d611735
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/redwood.svg	
@@ -0,0 +1,22 @@
+<svg width="48" height="51" viewBox="0 0 48 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8645)">
+    <g filter="url(#filter0_d_724_8645)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.4397 1.11776C19.6612 2.01272 15.9121 3.75514 13.881 5.1451C11.85 6.5351 12.1025 7.83001 11.2133 8.72497C10.324 9.61997 7.65626 11.8574 5.87773 13.1998C4.09924 14.5423 4.54385 18.1222 4.09924 19.4646C3.65462 20.8071 2.76536 23.9394 2.32074 25.2819C1.87611 26.6243 3.20999 28.4143 4.09924 30.2042C4.98849 31.9942 7.21162 36.9165 8.10086 38.7064C8.99014 40.4964 11.6579 39.6014 13.881 41.3913C16.1042 43.1813 19.2165 45.4189 21.4397 46.7613C23.6628 48.1037 24.5521 48.1037 26.7752 46.7613C28.9983 45.4189 32.1107 43.1813 34.3338 41.3913C36.557 39.6014 39.2247 40.4964 40.114 38.7064C41.0032 36.9165 43.2263 31.9942 44.1156 30.2042C45.0047 28.4143 46.3387 26.6243 45.894 25.2819C45.4494 23.9394 44.5602 20.8071 44.1156 19.4646C43.671 18.1222 44.1156 14.5423 42.3371 13.1998C40.5586 11.8574 38.4941 10.1481 37.0016 8.72497C35.509 7.30189 36.1123 6.48756 34.3338 5.1451C32.5553 3.80266 28.5537 2.01272 26.7752 1.11776C24.9967 0.222791 23.2182 0.222791 21.4397 1.11776Z" fill="white"/>
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1601 8.8748L23.4818 14.5551C23.6696 14.6802 23.889 14.7487 24.1141 14.7525C24.3396 14.7509 24.5596 14.6822 24.7464 14.5551L33.0744 8.8557C33.398 8.62405 33.5764 8.2378 33.544 7.83931C33.5116 7.44079 33.273 7.089 32.9164 6.91347L24.5947 2.79334C24.279 2.64018 23.9113 2.64018 23.5956 2.79334L15.2993 6.91347C14.9361 7.08994 14.6944 7.44855 14.6657 7.85355C14.637 8.2586 14.8256 8.64815 15.1601 8.8748ZM26.9407 16.3382C26.9414 16.7148 27.1257 17.0672 27.4339 17.2806L34.1051 21.8402C34.5322 22.1346 35.1036 22.0978 35.49 21.751L41.0862 16.7457C41.3356 16.5229 41.4741 16.2002 41.4643 15.8646C41.4546 15.529 41.2976 15.215 41.0356 15.0073L35.6923 10.7343C35.3039 10.4257 34.7621 10.4052 34.3518 10.6833L27.4339 15.4148C27.1312 15.6244 26.9475 15.9682 26.9407 16.3382ZM10.348 22.5406C10.6176 22.7828 10.7562 23.1401 10.7211 23.5022C10.686 23.8664 10.4757 24.1901 10.1583 24.3682L6.17453 26.7563C5.77069 26.9977 5.26082 26.9628 4.89301 26.6688C4.52524 26.3748 4.37592 25.8825 4.51778 25.4317L5.99113 20.7958C6.10671 20.4285 6.3997 20.1454 6.7689 20.0444C7.13787 19.937 7.53573 20.0311 7.81863 20.2927L10.348 22.5406ZM31.9552 23.0246L24.7528 18.0957C24.37 17.8382 23.8709 17.8382 23.4881 18.0957L16.2857 23.0246C15.9992 23.2229 15.8177 23.5415 15.7925 23.8907C15.7738 24.2422 15.9131 24.5836 16.1719 24.8204L23.368 31.2585C23.5755 31.4436 23.8432 31.5455 24.1204 31.545C24.3976 31.5449 24.6651 31.4431 24.8729 31.2585L32.069 24.8204C32.3285 24.5846 32.4661 24.2418 32.4421 23.8907C32.422 23.5415 32.2421 23.2216 31.9552 23.0246ZM12.7446 21.751L7.15466 16.7457C6.90314 16.5172 6.76435 16.1888 6.77524 15.8478C6.78131 15.5118 6.93685 15.1962 7.1989 14.9882L12.5422 10.6897C12.9333 10.382 13.4762 10.3615 13.8891 10.6388L20.8006 15.3702C21.1214 15.5806 21.3149 15.9399 21.3149 16.3254C21.3149 16.7109 21.1214 17.0703 20.8006 17.2806L14.1357 21.8402C13.706 22.1333 13.1339 22.0966 12.7446 21.751ZM41.4467 28.9405L35.7556 25.5336C35.3329 25.2789 34.7949 25.3305 34.4276 25.661L27.4718 31.8698C27.1785 32.1319 27.0406 32.5282 27.1076 32.9173C27.1746 33.3064 27.4368 33.6329 27.8007 33.7802L37.4502 37.6902C37.5826 37.7452 37.7244 37.7733 37.8676 37.773C38.3155 37.7744 38.722 37.5098 38.9047 37.098L41.8956 30.3988C42.1391 29.8686 41.9452 29.239 41.4467 28.9405ZM42.2371 20.7958L43.7105 25.4317H43.6978C43.8068 25.7785 43.7448 26.1568 43.5312 26.45C43.3175 26.7432 42.9776 26.9161 42.6165 26.9155C42.4139 26.9161 42.2149 26.8611 42.0411 26.7563L38.051 24.3682C37.7401 24.1864 37.537 23.863 37.5072 23.5022C37.4699 23.1398 37.6089 22.7816 37.8802 22.5406L40.4096 20.2863C40.6954 20.0303 41.0902 19.9368 41.4593 20.038C41.8283 20.1434 42.1203 20.4279 42.2371 20.7958ZM21.1294 32.9142C21.1975 32.5266 21.061 32.1313 20.769 31.8698L13.8132 25.661C13.446 25.3305 12.908 25.2789 12.4853 25.5336L6.79421 28.9405C6.30144 29.2403 6.10649 29.862 6.33894 30.3924L9.33622 37.0916C9.58457 37.6502 10.2266 37.9116 10.7906 37.6838L20.4339 33.7738C20.7978 33.6278 21.061 33.3027 21.1294 32.9142ZM24.5441 34.8246L32.284 37.9577C32.6624 38.1196 32.9239 38.4756 32.9669 38.8874C33.0159 39.3044 32.8307 39.7142 32.4864 39.9508L24.7401 45.332C24.5545 45.4624 24.3341 45.5334 24.1078 45.5356C23.8817 45.532 23.6616 45.4611 23.4755 45.332L15.7356 39.9508C15.3899 39.7148 15.2025 39.3054 15.2486 38.8874C15.3003 38.4712 15.5712 38.1157 15.9569 37.9577L23.6968 34.8246C23.9689 34.7161 24.2719 34.7161 24.5441 34.8246Z" fill="#BF4722"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_724_8645" x="0.232422" y="0.446533" width="47.7499" height="51.3215" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.202934 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_724_8645"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_724_8645" result="shape"/>
+    </filter>
+    <clipPath id="clip0_724_8645">
+      <rect width="48" height="51" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/remix.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/remix.svg
new file mode 100644
index 00000000..a9457061
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/remix.svg	
@@ -0,0 +1,11 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_4_2)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M657.27 575.205C663.098 650.067 663.098 685.159 663.098 723.465H489.89C489.89 715.121 490.039 707.488 490.19 699.749C490.658 675.689 491.147 650.599 487.249 599.932C482.097 525.753 450.154 509.27 391.419 509.27H339.382H119V374.307H399.663C473.853 374.307 510.949 351.738 510.949 291.983C510.949 239.441 473.853 207.601 399.663 207.601H119V75.5353H430.576C598.535 75.5353 682 154.865 682 281.585C682 376.368 623.266 438.183 543.923 448.485C610.9 461.878 650.057 499.998 657.27 575.205Z" fill="white"/>
+    <path d="M119 723.465V622.855H302.142C332.733 622.855 339.375 645.543 339.375 659.075V723.465H119Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4_2">
+      <rect width="800" height="800" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/solid.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/solid.svg
new file mode 100644
index 00000000..1cf619e5
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/solid.svg	
@@ -0,0 +1,35 @@
+<svg width="49" height="46" viewBox="0 0 49 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8658)">
+    <path d="M48.9977 9.9998C48.9977 9.9998 32.9266 -1.82621 20.4942 0.902735L19.5845 1.20595C17.7652 1.81239 16.2492 2.72204 15.3393 3.9349L14.7329 4.84455L10.1844 12.7286L18.0685 14.2446C21.4038 16.3674 25.6491 17.277 29.5911 16.3674L43.5396 19.0963L48.9977 9.9998Z" fill="#76B3E1"/>
+    <path opacity="0.3" d="M48.9977 9.9998C48.9977 9.9998 32.9266 -1.82621 20.4942 0.902735L19.5845 1.20595C17.7652 1.81239 16.2492 2.72204 15.3393 3.9349L14.7329 4.84455L10.1844 12.7286L18.0685 14.2446C21.4038 16.3674 25.6491 17.277 29.5911 16.3674L43.5396 19.0963L48.9977 9.9998Z" fill="url(#paint0_linear_724_8658)"/>
+    <path d="M15.3402 9.99996L14.1273 10.3032C8.97245 11.8193 7.45618 16.6709 10.1853 20.9161C13.2175 24.8581 19.5854 26.9807 24.7403 25.4646L43.5405 19.0968C43.5405 19.0968 27.4694 7.27082 15.3402 9.99996Z" fill="#518AC8"/>
+    <path opacity="0.3" d="M15.3402 9.99996L14.1273 10.3032C8.97245 11.8193 7.45618 16.6709 10.1853 20.9161C13.2175 24.8581 19.5854 26.9807 24.7403 25.4646L43.5405 19.0968C43.5405 19.0968 27.4694 7.27082 15.3402 9.99996Z" fill="url(#paint1_linear_724_8658)"/>
+    <path d="M40.2048 23.6454C36.732 19.3067 30.9752 17.5076 25.6499 19.0969L6.84968 25.1615L0.785156 35.7744L34.7467 41.5357L40.8113 30.6195C42.0241 28.497 41.7209 26.0713 40.2048 23.6454Z" fill="url(#paint2_linear_724_8658)"/>
+    <path d="M34.1403 34.2582C30.6674 29.9195 24.9105 28.1204 19.5853 29.7097L0.785156 35.7742C0.785156 35.7742 16.8562 47.9035 29.2887 44.8711L30.1983 44.5679C35.3532 43.0518 37.1729 38.2002 34.1403 34.2582Z" fill="url(#paint3_linear_724_8658)"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear_724_8658" x1="-217.222" y1="712.408" x2="3002.41" y2="2277.01" gradientUnits="userSpaceOnUse">
+      <stop offset="0.1" stop-color="#76B3E1"/>
+      <stop offset="0.3" stop-color="#DCF2FD"/>
+      <stop offset="1" stop-color="#76B3E1"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_724_8658" x1="1986.14" y1="638.668" x2="1796.53" y2="1270.12" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#76B3E1"/>
+      <stop offset="0.5" stop-color="#4377BB"/>
+      <stop offset="1" stop-color="#1F3B77"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_724_8658" x1="437.439" y1="813.085" x2="3432.54" y2="2849.43" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#315AA9"/>
+      <stop offset="0.5" stop-color="#518AC8"/>
+      <stop offset="1" stop-color="#315AA9"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_724_8658" x1="2159.79" y1="508.887" x2="1742.22" y2="2040.21" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#4377BB"/>
+      <stop offset="0.5" stop-color="#1A336B"/>
+      <stop offset="1" stop-color="#1A336B"/>
+    </linearGradient>
+    <clipPath id="clip0_724_8658">
+      <rect width="48.2188" height="45.0117" fill="white" transform="translate(0.78125 0.494141)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/storybook.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/storybook.svg
new file mode 100644
index 00000000..43176b92
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/storybook.svg	
@@ -0,0 +1,16 @@
+<svg width="38" height="48" viewBox="0 0 38 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8623)">
+    <path d="M1.60789 43.7836L0.150268 4.94068C0.101927 3.65765 1.08545 2.57034 2.36671 2.49051L35.4056 0.425596C36.7097 0.343993 37.833 1.33521 37.9146 2.63938C37.9175 2.68846 37.9191 2.73769 37.9191 2.78692V45.1133C37.9191 46.42 36.8599 47.4792 35.5532 47.4792C35.5178 47.4792 35.4823 47.4785 35.4471 47.4768L3.86617 46.0584C2.63621 46.0033 1.65416 45.014 1.60789 43.7836Z" fill="#FF4785"/>
+    <mask id="mask0_724_8623" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="38" height="48">
+      <path d="M1.60594 43.7833L0.148315 4.94044C0.0999734 3.6574 1.0835 2.5701 2.36476 2.49027L35.4036 0.425352C36.7078 0.343749 37.831 1.33496 37.9126 2.63914C37.9156 2.68822 37.9172 2.73745 37.9172 2.78667V45.1131C37.9172 46.4197 36.858 47.479 35.5513 47.479C35.5158 47.479 35.4803 47.4782 35.4451 47.4766L3.86422 46.0582C2.63426 46.003 1.65221 45.0137 1.60594 43.7833Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask0_724_8623)">
+      <path d="M28.0369 6.20488L28.2627 0.777077L32.8 0.420654L32.9954 6.01802C32.9978 6.08532 32.9809 6.15192 32.9467 6.20994C32.9125 6.26796 32.8624 6.31498 32.8024 6.34545C32.7423 6.37591 32.6748 6.38855 32.6078 6.38188C32.5407 6.3752 32.477 6.34949 32.4242 6.30777L30.6746 4.92924L28.603 6.50069C28.5497 6.54121 28.4859 6.56572 28.4192 6.57135C28.3524 6.57697 28.2854 6.56349 28.2261 6.53246C28.1667 6.50144 28.1174 6.45416 28.0839 6.39615C28.0504 6.33814 28.0341 6.2718 28.0369 6.20488ZM22.2344 18.1575C22.2344 19.0781 28.4348 18.637 29.2671 17.9903C29.2671 11.722 25.9036 8.42798 19.7445 8.42798C13.5855 8.42798 10.1346 11.7731 10.1346 16.7908C10.1346 25.5302 21.9287 25.6976 21.9287 30.4644C21.9287 31.8026 21.2733 32.597 19.8318 32.597C17.9536 32.597 17.2109 31.6376 17.2983 28.3761C17.2983 27.6686 10.1346 27.448 9.91614 28.3761C9.36 36.2801 14.2843 38.5598 19.9192 38.5598C25.3794 38.5598 29.6601 35.6495 29.6601 30.3809C29.6601 21.0142 17.6915 21.2651 17.6915 16.6236C17.6915 14.742 19.0893 14.4912 19.9193 14.4912C20.7929 14.4912 22.3654 14.6452 22.2344 18.1575Z" fill="white"/>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8623">
+      <rect width="37.8594" height="47.1584" fill="white" transform="translate(0.140747 0.420898)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/svelte.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/svelte.svg
new file mode 100644
index 00000000..62309a1d
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/svelte.svg	
@@ -0,0 +1,11 @@
+<svg width="43" height="50" viewBox="0 0 43 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8686)">
+    <path d="M39.7864 6.6083C35.1486 -0.0295292 25.989 -1.9969 19.3664 2.22242L7.73528 9.63573C6.16403 10.6242 4.81632 11.9297 3.77829 13.4687C2.74026 15.0076 2.03476 16.7463 1.70687 18.5734C1.152 21.6512 1.63965 24.8261 3.09258 27.5955C2.09698 29.1057 1.41793 30.8022 1.09648 32.5823C0.765155 34.4463 0.809359 36.3576 1.2265 38.2043C1.64364 40.0509 2.42533 41.7957 3.5257 43.3362C8.16434 49.9747 17.3239 51.9412 23.9457 47.7219L35.5768 40.3089C37.1482 39.3205 38.496 38.0151 39.5341 36.4761C40.5721 34.9371 41.2775 33.1983 41.6052 31.3711C42.16 28.2934 41.6727 25.1186 40.2205 22.3489C41.2158 20.8386 41.8945 19.1422 42.2156 17.3622C42.5472 15.4983 42.5031 13.5869 42.086 11.7402C41.6689 9.89352 40.887 8.14876 39.7864 6.6083Z" fill="#FF3E00"/>
+    <path d="M18.2297 43.9678C14.4794 44.9429 10.5192 43.4749 8.3104 40.2911C7.64834 39.3645 7.17803 38.3149 6.92705 37.204C6.67608 36.0931 6.6495 34.9433 6.84887 33.822C6.91639 33.4538 7.00931 33.0908 7.12696 32.7355L7.34611 32.0674L7.94205 32.5053C9.31868 33.5167 10.8579 34.2857 12.4934 34.7791L12.9257 34.9103L12.8859 35.3419C12.833 35.9559 12.9992 36.5687 13.355 37.0718C13.6795 37.54 14.1399 37.8974 14.674 38.0956C15.2081 38.2938 15.7902 38.3234 16.3416 38.1803C16.5945 38.1127 16.8355 38.0067 17.0563 37.8661L28.6911 30.4519C28.9758 30.2726 29.22 30.036 29.4082 29.7571C29.5964 29.4783 29.7245 29.1633 29.7843 28.8322C29.844 28.4942 29.8358 28.1478 29.7602 27.813C29.6845 27.4782 29.543 27.1619 29.3438 26.8824C29.0191 26.414 28.5586 26.0566 28.0243 25.8583C27.4901 25.6599 26.9078 25.6303 26.3562 25.7733C26.1037 25.8409 25.863 25.9467 25.6425 26.0871L21.2026 28.9173C20.4726 29.3815 19.6759 29.7313 18.8401 29.9548C15.0899 30.9299 11.1296 29.4619 8.92111 26.278C8.25901 25.3514 7.78866 24.3018 7.53766 23.191C7.28666 22.0801 7.26006 20.9303 7.45942 19.809C7.65662 18.7099 8.08103 17.6641 8.70551 16.7385C9.32999 15.8129 10.1408 15.0277 11.086 14.4333L22.7198 7.01825C23.4502 6.55334 24.2475 6.20306 25.0839 5.97961C28.8341 5.00445 32.7945 6.47247 35.0029 9.65624C35.665 10.5829 36.1354 11.6325 36.3864 12.7434C36.6374 13.8543 36.664 15.0041 36.4646 16.1254C36.3968 16.4934 36.3039 16.8564 36.1865 17.2118L35.9674 17.8799L35.3716 17.4428C33.9951 16.4307 32.4558 15.6614 30.8201 15.1679L30.3877 15.0366L30.4276 14.6051C30.48 13.9912 30.3139 13.3785 29.9584 12.8752C29.6339 12.407 29.1735 12.0496 28.6394 11.8514C28.1053 11.6531 27.5232 11.6236 26.9718 11.7668C26.7189 11.8344 26.4779 11.9403 26.2572 12.0809L14.6224 19.4955C14.3377 19.6746 14.0935 19.9111 13.9054 20.19C13.7173 20.4688 13.5894 20.7838 13.5299 21.1148C13.4698 21.4528 13.4778 21.7993 13.5533 22.1341C13.6288 22.469 13.7704 22.7854 13.9697 23.0648C14.2944 23.5332 14.7549 23.8906 15.2892 24.0889C15.8234 24.2873 16.4057 24.3169 16.9573 24.1739C17.2101 24.1062 17.4511 24.0003 17.6719 23.8598L22.111 21.0307C22.8408 20.5659 23.6375 20.2157 24.4734 19.9923C28.2235 19.0173 32.1839 20.4853 34.3925 23.6692C35.0546 24.5958 35.5249 25.6454 35.7759 26.7562C36.0268 27.867 36.0534 29.0168 35.8541 30.1381C35.6568 31.2372 35.2323 32.2831 34.6078 33.2089C33.9834 34.1347 33.1726 34.92 32.2274 35.5147L20.5937 42.9291C19.8633 43.394 19.0662 43.7443 18.2297 43.9678Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8686">
+      <rect width="41.5625" height="50" fill="white" transform="translate(0.875)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/vitest.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/vitest.svg
new file mode 100644
index 00000000..c9d5fd3e
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/vitest.svg	
@@ -0,0 +1,12 @@
+<svg width="46" height="42" viewBox="0 0 46 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8631)">
+    <path d="M34.6953 12.8271L23.867 28.4836C23.7519 28.6499 23.5859 28.7742 23.394 28.8379C23.202 28.9016 22.9944 28.9013 22.8025 28.837C22.6112 28.7727 22.446 28.6479 22.3319 28.4813C22.2182 28.315 22.162 28.1159 22.1721 27.9146L22.6056 19.2707L15.6091 17.7869C15.4598 17.7553 15.3205 17.6874 15.2036 17.5891C15.087 17.4912 14.9964 17.3659 14.94 17.2245C14.8835 17.0831 14.8628 16.9299 14.8798 16.7786C14.897 16.6271 14.9514 16.4823 15.0382 16.357L25.8668 0.700462C25.9821 0.534296 26.1482 0.410032 26.3402 0.346348C26.5321 0.282663 26.7395 0.282998 26.9313 0.347302C27.1227 0.411481 27.2879 0.536342 27.4019 0.702939C27.5157 0.86961 27.5718 1.06848 27.5617 1.26966L27.1282 9.91375L34.1245 11.3975C34.2739 11.4291 34.4132 11.497 34.5302 11.5951C34.6469 11.693 34.7376 11.8183 34.7941 11.9598C34.8505 12.1012 34.8711 12.2545 34.8538 12.4059C34.8366 12.5573 34.7822 12.7019 34.6953 12.8271Z" fill="#FCC72B"/>
+    <path d="M23.356 41.6193C23.068 41.6196 22.7828 41.5631 22.5167 41.4529C22.2506 41.3426 22.0089 41.1809 21.8056 40.977L11.5738 30.7462C11.1644 30.3347 10.9349 29.7776 10.9357 29.1972C10.9364 28.6167 11.1674 28.0602 11.5779 27.6498C11.9884 27.2395 12.5448 27.0087 13.1252 27.0079C13.7056 27.0071 14.2626 27.2364 14.6742 27.6456L23.356 36.3261L42.2688 17.4141C42.68 17.0029 43.2376 16.772 43.8191 16.772C44.4005 16.772 44.9582 17.003 45.3693 17.4142C45.7804 17.8253 46.0114 18.383 46.0114 18.9644C46.0114 19.5459 45.7804 20.1035 45.3692 20.5146L24.906 40.977C24.7027 41.181 24.4611 41.3427 24.1951 41.4529C23.9291 41.5632 23.644 41.6197 23.356 41.6193Z" fill="#729B1B"/>
+    <path d="M23.3478 41.6193C23.6358 41.6197 23.9211 41.5631 24.1871 41.4529C24.4532 41.3427 24.6949 41.181 24.8983 40.9771L35.13 30.7462C35.5393 30.3348 35.7687 29.7777 35.7678 29.1973C35.767 28.6169 35.536 28.0605 35.1256 27.65C34.7151 27.2396 34.1587 27.0086 33.5783 27.0076C32.9979 27.007 32.4409 27.2364 32.0292 27.6456L23.3478 36.3262L4.43485 17.4141C4.02224 17.0099 3.46682 16.7849 2.88925 16.7879C2.31167 16.7909 1.75861 17.0216 1.35019 17.43C0.941782 17.8384 0.711019 18.3915 0.708037 18.9691C0.705055 19.5467 0.930094 20.1021 1.33427 20.5147L21.7977 40.9771C22.001 41.181 22.2426 41.3427 22.5086 41.4529C22.7745 41.5631 23.0599 41.6197 23.3478 41.6193Z" fill="#729B1B" fill-opacity="0.5"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8631">
+      <rect width="45.2969" height="41.4025" fill="white" transform="translate(0.703125 0.298828)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/vue.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/vue.svg
new file mode 100644
index 00000000..b29e1a42
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/vue.svg	
@@ -0,0 +1,12 @@
+<svg width="51" height="44" viewBox="0 0 51 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_724_8519)">
+    <path d="M40.984 0.385498H50.9991L25.9615 43.5754L0.923828 0.385498H20.0776L25.9615 10.4005L31.7201 0.385498H40.984Z" fill="#41B883"/>
+    <path d="M0.923828 0.385498L25.9615 43.5754L50.9991 0.385498H40.984L25.9615 26.2994L10.8137 0.385498H0.923828Z" fill="#41B883"/>
+    <path d="M10.8135 0.385498L25.9612 26.4246L40.9838 0.385498H31.7199L25.9612 10.4005L20.0774 0.385498H10.8135Z" fill="#35495E"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_724_8519">
+      <rect width="50.0781" height="43.229" fill="white" transform="translate(0.921875 0.385498)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/.vitepress/theme/components/landing/4. community-section/CommunityCard.vue b/.vitepress/theme/components/landing/4. community-section/CommunityCard.vue
new file mode 100644
index 00000000..161c9738
--- /dev/null
+++ b/.vitepress/theme/components/landing/4. community-section/CommunityCard.vue	
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+export interface Testimonial {
+  /**
+   * The URL to the avatar image.
+   */
+  avatar: string
+
+  /**
+   * The name of the Vite user.
+   */
+  name: string
+
+  /**
+   * Their social media handle.
+   */
+  handle: string
+
+  /**
+   * Their comment/testimonial about Vite.
+   */
+  comment: string[]
+}
+
+defineProps<{
+  /**
+   * A testimonial from a Vite user.
+   */
+  testimonial: Testimonial
+}>()
+</script>
+
+<template>
+  <div class="community-card">
+    <div class="card__header">
+      <img
+        :src="testimonial.avatar"
+        :alt="testimonial.name"
+        class="card__avatar"
+      />
+      <div class="card__meta">
+        <span class="card__name">
+          {{ testimonial.name }}
+        </span>
+        <span class="card__handle">
+          {{ testimonial.handle }}
+        </span>
+      </div>
+    </div>
+    <div class="card__content">
+      <p v-for="p of testimonial.comment">{{ p }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.community-card {
+  break-inside: avoid;
+  width: 100%;
+  margin-bottom: 25px;
+  border-radius: 12px;
+  border: 1px solid rgba(38, 38, 38, 0.7);
+  background: #161616;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .card__avatar {
+    width: 48px;
+    aspect-ratio: 1;
+    border-radius: 100%;
+  }
+
+  .card__content {
+    color: #a3a3a3;
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%;
+    letter-spacing: -0.32px;
+    text-wrap: pretty;
+    cursor: default;
+  }
+
+  .card__content p {
+    margin-top: 10px;
+  }
+
+  .card__header {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    align-items: center;
+  }
+
+  .card__meta {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card__name {
+    color: #fff;
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 150%;
+    letter-spacing: -0.3px;
+  }
+
+  .card__handle {
+    color: #a3a3a3;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 150%;
+    letter-spacing: -0.3px;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue b/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue
new file mode 100644
index 00000000..558dd644
--- /dev/null
+++ b/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue	
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import CommunityCard, { Testimonial } from './CommunityCard.vue'
+import placeholderAvatar from '/images/community/placeholder.jpg'
+
+const testimonials: Testimonial[] = [
+  {
+    name: 'Ryan Carniato',
+    handle: '@RyanCarniato',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1810837163447308292/8Piov0f6_400x400.jpg',
+    comment: [
+      `I'm loving what Vite enables. We've found building SolidStart that it is less a metaframework but a system of symbiotic Vite plugins. While built with
+SolidJS in mind, they should scale from our simplest template to opinionated starter. We're building an ecosystem on Vite.`,
+    ],
+  },
+  {
+    name: 'Rich Harris',
+    handle: '@Rich_Harris',
+    avatar:
+      'https://pbs.twimg.com/profile_images/557940120184041473/bFyXy8Pu_400x400.jpeg',
+    comment: [
+      `Vite is basically the united nations of JavaScript at this point. I'll be there as a representative of Sveltelandia`,
+    ],
+  },
+  {
+    name: 'David East',
+    handle: '@_davideast',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1691627325794725888/voQFcYjY_400x400.jpg',
+    comment: [
+      'Each and every time I use Vite, I feel a true sense of pure and unbridled joy.',
+    ],
+  },
+  {
+    name: 'Mark Dalgleish',
+    handle: '@markdalgleish',
+    avatar:
+      'https://pbs.twimg.com/profile_images/754886061872979968/BzaOWhs1_400x400.jpg',
+    comment: [
+      `It’s also a great platform to build a framework on since it provides a pluggable dev environment.`,
+      `Community is amazing too.`,
+    ],
+  },
+  {
+    name: 'Jason Miller',
+    handle: '@_developit',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1374778373239681025/Sc9ehtAr_400x400.jpg',
+    comment: [
+      `Every time I suspect I've hit the bounds of what Vite can do, I end up being wrong.`,
+    ],
+  },
+  {
+    name: 'David Cramer',
+    handle: '@zeeg',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1706891973553168384/zdAPOznc_400x400.jpg',
+    comment: ['Vite has been a game changer for the industry.'],
+  },
+  {
+    name: 'Dion Almaer',
+    handle: '@dalmaer',
+    avatar:
+      'https://pbs.twimg.com/profile_images/3380865881/f73b3687ff39b795db05fcaf35972270_400x400.jpeg',
+    comment: [
+      'I am so excited to see so many great frameworks teaming up on top of vite. So many will benefit. ❤️ to the vite team.',
+    ],
+  },
+  {
+    name: 'Christoph Nakazawa',
+    handle: '@cpojer',
+    avatar:
+      'https://pbs.twimg.com/profile_images/1189537722286952449/OrscO0bD_400x400.jpg',
+    comment: ['Vite is gonna eat the (JavaScript) world.'],
+  },
+  {
+    name: 'Nikolaj',
+    handle: '@lopugit',
+    avatar: 'https://avatars.githubusercontent.com/u/13629190?v=4',
+    comment: [
+      'Wow, wow, wow, wow, wow, wow, Vite is..... Vite is.... Wow 🤤🤯🙏',
+    ],
+  },
+]
+</script>
+
+<template>
+  <section class="community-section">
+    <h2>コミュニティに愛される</h2>
+    <h3>
+      私たちの言葉を鵜呑みにせず、Vite コミュニティメンバーの声を聞いてください。
+
+    </h3>
+    <div class="community-grid-container">
+      <div class="community-grid">
+        <CommunityCard
+          :testimonial="testimonial"
+          v-for="testimonial in testimonials"
+          :key="testimonial.name"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.community-section {
+  margin-top: 140px;
+  display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+  }
+
+  h2 {
+    background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.76) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 0 auto 10px;
+    text-align: center;
+  }
+
+  h3 {
+    width: 455px;
+    max-width: 100%;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .community-grid-container {
+    position: relative;
+  }
+
+  .community-grid {
+    column-count: 2;
+    column-gap: 25px;
+    width: calc(100% - 50px);
+    margin: 40px auto 0;
+
+    @media (min-width: 1150px) {
+      column-count: 3;
+      width: 1100px;
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue b/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue
new file mode 100644
index 00000000..a5f1d2a9
--- /dev/null
+++ b/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue	
@@ -0,0 +1,223 @@
+<script setup>
+import { useSponsor } from '../../../composables/sponsor'
+import { VPSponsors } from 'vitepress/theme'
+
+const { data } = useSponsor()
+</script>
+
+<template>
+  <div class="sponsor-section">
+    <svg
+      class="bg-lines"
+      width="1793"
+      height="1269"
+      viewBox="0 0 1793 1269"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M752.613 0.717285L787.634 201.189C794.351 239.643 797.729 278.606 797.729 317.642L797.729 1268.54M649.493 0.717285L704.366 138.145C736.239 217.969 752.613 303.135 752.613 389.088L752.614 1268.54M572.153 0.717285L630.175 111.432C680.966 208.35 707.498 316.138 707.498 425.558L707.498 1268.54M505.862 0.717285L564.392 97.2923C628.492 203.058 662.383 324.367 662.383 448.041L662.383 1268.54M452.46 0.717285L511.009 92.4655C580.401 201.205 617.268 327.512 617.268 456.507L617.268 1268.54M407.345 0.717285L465.894 92.4655C535.286 201.205 572.153 327.512 572.153 456.507L572.153 1268.54M362.23 0.717285L420.779 92.4655C490.17 201.205 527.038 327.512 527.038 456.507L527.038 1268.54M317.115 0.717285L375.664 92.4655C445.055 201.205 481.923 327.512 481.923 456.507L481.923 1268.54M272 0.717285L330.549 92.4655C399.94 201.205 436.808 327.512 436.808 456.507L436.808 1268.54M226.885 0.717285L285.433 92.4655C354.825 201.205 391.693 327.512 391.693 456.507L391.693 1268.54M181.77 0.717285L240.318 92.4655C309.71 201.205 346.578 327.512 346.578 456.507L346.578 1268.54M136.655 0.717285L195.203 92.4655C264.595 201.205 301.463 327.512 301.463 456.507L301.463 1268.54M91.5395 0.717285L150.088 92.4655C219.48 201.205 256.348 327.512 256.348 456.507L256.348 1268.54M46.4244 0.717285L104.973 92.4655C174.365 201.205 211.233 327.512 211.233 456.507L211.233 1268.54M1.30933 0.717285L59.8581 92.4655C129.25 201.205 166.117 327.512 166.117 456.507L166.117 1268.54M1040.8 0.717285L1005.78 201.189C999.06 239.643 995.683 278.606 995.683 317.642V1268.54M1143.92 0.717285L1089.04 138.145C1057.17 217.969 1040.8 303.135 1040.8 389.088V1268.54M1221.26 0.717285L1163.24 111.432C1112.45 208.35 1085.91 316.138 1085.91 425.558V1268.54M1287.55 0.717285L1229.02 97.2923C1164.92 203.058 1131.03 324.367 1131.03 448.041V1268.54M1340.95 0.717285L1282.4 92.4655C1213.01 201.205 1176.14 327.512 1176.14 456.507V1268.54M1386.07 0.717285L1327.52 92.4655C1258.13 201.205 1221.26 327.512 1221.26 456.507V1268.54M1431.18 0.717285L1372.63 92.4655C1303.24 201.205 1266.37 327.512 1266.37 456.507V1268.54M1476.3 0.717285L1417.75 92.4655C1348.36 201.205 1311.49 327.512 1311.49 456.507V1268.54M1521.41 0.717285L1462.86 92.4655C1393.47 201.205 1356.6 327.512 1356.6 456.507V1268.54M1566.53 0.717285L1507.98 92.4655C1438.59 201.205 1401.72 327.512 1401.72 456.507V1268.54M1611.64 0.717285L1553.09 92.4655C1483.7 201.205 1446.83 327.512 1446.83 456.507V1268.54M1656.76 0.717285L1598.21 92.4655C1528.82 201.205 1491.95 327.512 1491.95 456.507V1268.54M1701.87 0.717285L1643.32 92.4655C1573.93 201.205 1537.06 327.512 1537.06 456.507V1268.54M1746.99 0.717285L1688.44 92.4655C1619.05 201.205 1582.18 327.512 1582.18 456.507V1268.54M1792.1 0.717285L1733.55 92.4655C1664.16 201.205 1627.29 327.512 1627.29 456.507V1268.54M968.061 0.717335L950.567 258.978V1268.54M893.943 0.717285L893.943 1268.54M824.89 0.717285L842.843 258.978L842.843 1268.54"
+        stroke="url(#linear-sponsor-lines)"
+      />
+      <defs>
+        <linearGradient
+          id="linear-sponsor-lines"
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="1200"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.1" stop-color="#1b1c20" stop-opacity="0" />
+          <stop offset="0.35" stop-color="#1b1c20" />
+          <stop offset="0.55" stop-color="#1b1c20" stop-opacity="0.2" />
+          <stop offset="0.6" stop-color="#1b1c20" stop-opacity="0.2" />
+          <stop offset="0.7" stop-color="#1b1c20" />
+          <stop offset="1" stop-color="#1b1c20" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+
+    <!-- Title Section -->
+    <img
+      class="icon-heart"
+      src="/heart.svg"
+      alt="Vite is made possible by our contributors, partner companies, and sponsors"
+      width="58"
+      height="55"
+    />
+    <h2>無料 &amp; オープンソース</h2>
+    <h4>
+      Vite は MIT ライセンスで、常に無料かつオープンソースであり続けます。これは、私たちのコントリビューターと以下の企業によって実現されています:
+
+    </h4>
+
+    <h4>提供</h4>
+    <div class="voidzero">
+      <a href="https://voidzero.dev" target="_blank">
+        <img src="./voidzero.svg" />
+      </a>
+    </div>
+
+    <!-- Sponsor Grid -->
+    <div class="sponsor-grid">
+      <VPSponsors v-if="data" :data="data" />
+    </div>
+
+    <!-- Sponsorship Actions -->
+    <div class="sponsor-actions">
+      <a
+        href="https://github.com/sponsors/vitejs"
+        target="_blank"
+        class="btn btn--outline btn--rounded"
+        >スポンサーになる</a
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sponsor-section {
+  margin-top: 120px;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+
+  @media (min-width: 768px) {
+    margin-top: 180px;
+  }
+
+  .bg-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 0;
+    display: none;
+    pointer-events: none;
+
+    @media (min-width: 1240px) {
+      display: block;
+    }
+  }
+
+  .icon-heart {
+    margin: 0 auto 10px;
+  }
+
+  h2 {
+    background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.76) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 0 auto 10px;
+    text-align: center;
+  }
+
+  .voidzero {
+    text-align: center;
+    img {
+      position: relative;
+      display: inline-block;
+      max-width: 260px;
+    }
+  }
+
+  h4 {
+    color: #a3a3a3;
+    text-align: center;
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 24px */
+    letter-spacing: -0.32px;
+    width: 480px;
+    max-width: 100%;
+    margin: 0 auto 40px;
+  }
+
+  .sponsor-grid {
+    width: 1200px;
+    margin: 40px auto 0;
+
+    @media (max-width: 1240px) {
+      width: 100%;
+      padding: 0 20px;
+    }
+
+    &:deep(.vp-sponsor-tier) {
+      color: #fff;
+      text-align: center;
+      font-family: Inter, sans-serif;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 150%;
+      letter-spacing: -0.32px;
+      width: 100%;
+      max-width: unset;
+      padding: 18px;
+      display: block;
+      border-radius: 12px;
+      border: 1px solid rgba(38, 38, 38, 0.7);
+      background: #161616;
+      margin: 20px auto !important;
+
+      @media (min-width: 768px) {
+        background: rgba(38, 38, 38, 0.25);
+        backdrop-filter: blur(1px);
+      }
+    }
+
+    &:deep(.vp-sponsor-grid) {
+      gap: 20px;
+    }
+
+    &:deep(.vp-sponsor-grid-item) {
+      border-radius: 12px;
+      border: 1px solid rgba(38, 38, 38, 0.7);
+      background: #161616;
+
+      @media (min-width: 768px) {
+        background: rgba(38, 38, 38, 0.25);
+        backdrop-filter: blur(1px);
+      }
+    }
+
+    &:deep(.vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item) {
+      width: calc((100% - 20px) / 2);
+    }
+
+    &:deep(.vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item) {
+      width: calc((100% - 20px * 2) / 3);
+    }
+
+    &:deep(.vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item) {
+      width: calc((100% - 20px * 3) / 4);
+    }
+
+    &:deep(.vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item) {
+      width: calc((100% - 20px * 4) / 5);
+    }
+
+    &:deep(.vp-sponsor-grid-item .vp-sponsor-grid-image) {
+      transition: transform 0.2s ease-in-out;
+    }
+
+    &:deep(.vp-sponsor-grid-item:hover .vp-sponsor-grid-image) {
+      filter: grayscale(1) invert(1);
+      transform: scale(1.05);
+    }
+  }
+
+  .sponsor-actions {
+    margin: 60px auto 0;
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/5. sponsor-section/voidzero.svg b/.vitepress/theme/components/landing/5. sponsor-section/voidzero.svg
new file mode 100644
index 00000000..99cb8182
--- /dev/null
+++ b/.vitepress/theme/components/landing/5. sponsor-section/voidzero.svg	
@@ -0,0 +1,11 @@
+<svg width="326" height="103" viewBox="0 0 326 103" xmlns="http://www.w3.org/2000/svg">
+<path d="M82.8153 32.6886C87.0907 32.6886 90.8571 33.3672 94.1145 34.7243C97.3719 36.0815 100.12 37.9816 102.36 40.4245C104.667 42.7995 106.398 45.6835 107.551 49.0765C108.705 52.4694 109.282 56.2356 109.282 60.375C109.282 64.5822 108.705 68.3823 107.551 71.7753C106.466 75.1003 104.803 77.9843 102.563 80.4273C100.324 82.8702 97.5416 84.7363 94.2163 86.0256C90.9589 87.3149 87.1586 87.9596 82.8153 87.9596C78.54 87.9596 74.7735 87.3149 71.5161 86.0256C68.2587 84.6684 65.5102 82.8023 63.2707 80.4273C61.0991 77.9843 59.4365 75.0664 58.2828 71.6735C57.197 68.2805 56.6541 64.5144 56.6541 60.375C56.6541 56.2356 57.197 52.4694 58.2828 49.0765C59.4365 45.6835 61.1331 42.7995 63.3725 40.4245C65.612 37.9816 68.3605 36.0815 71.6179 34.7243C74.8753 33.3672 78.6078 32.6886 82.8153 32.6886ZM82.8153 77.8826C85.462 77.8826 87.7015 77.4415 89.5338 76.5593C91.4339 75.6093 92.9608 74.3539 94.1145 72.7931C95.336 71.2324 96.2183 69.4002 96.7612 67.2966C97.3719 65.193 97.6773 62.9197 97.6773 60.4768C97.6773 58.0338 97.3719 55.7606 96.7612 53.6569C96.2183 51.4855 95.336 49.6193 94.1145 48.0586C92.9608 46.4978 91.4339 45.2764 89.5338 44.3942C87.7015 43.5121 85.462 43.071 82.8153 43.071C80.2365 43.071 78.031 43.5121 76.1987 44.3942C74.3664 45.2764 72.8394 46.4978 71.6179 48.0586C70.3964 49.6193 69.4802 51.4855 68.8694 53.6569C68.3265 55.7606 68.0551 58.0338 68.0551 60.4768C68.0551 62.9197 68.3265 65.193 68.8694 67.2966C69.4802 69.4002 70.3624 71.2324 71.5161 72.7931C72.7376 74.3539 74.2646 75.6093 76.0969 76.5593C77.997 77.4415 80.2365 77.8826 82.8153 77.8826Z" fill="#fff"/>
+<path d="M192.981 87.2471H182.089L181.478 79.8165C179.51 82.6666 177.033 84.7024 174.047 85.9238C171.061 87.1453 167.702 87.8239 163.969 87.9596C159.83 87.8917 156.267 87.1453 153.281 85.7203C150.295 84.2274 147.818 82.2594 145.85 79.8165C143.882 77.3058 142.423 74.4218 141.473 71.1645C140.591 67.9073 140.15 64.4465 140.15 60.7821C140.15 56.7785 140.659 53.0801 141.676 49.6872C142.762 46.2943 144.357 43.3424 146.461 40.8316C148.565 38.3209 151.143 36.3529 154.197 34.9279C157.251 33.435 160.814 32.6886 164.886 32.6886C167.804 32.6886 170.756 33.1636 173.742 34.1136C176.728 35.0636 179.273 36.828 181.376 39.4066V5.18881L192.981 14.5409V87.2471ZM166.209 43.1728C163.63 43.1728 161.425 43.6138 159.592 44.496C157.76 45.3782 156.233 46.5996 155.012 48.1604C153.858 49.7211 153.01 51.5873 152.467 53.7587C151.924 55.8624 151.652 58.1356 151.652 60.5785C151.652 63.0215 151.924 65.2947 152.467 67.3984C153.01 69.502 153.858 71.3342 155.012 72.8949C156.233 74.4557 157.76 75.7111 159.592 76.6611C161.492 77.5433 163.766 77.9843 166.413 77.9843C168.923 77.9843 171.095 77.5093 172.927 76.5593C174.828 75.5414 176.388 74.2182 177.61 72.5896C178.899 70.961 179.849 69.0948 180.46 66.9912C181.071 64.8876 181.376 62.7161 181.376 60.4768C181.376 58.1017 181.071 55.8624 180.46 53.7587C179.917 51.6551 179.035 49.8569 177.814 48.364C176.592 46.8032 175.031 45.5817 173.131 44.6996C171.231 43.7496 168.923 43.2406 166.209 43.1728Z" fill="#fff"/>
+<path d="M0 32.3832H12.8261L27.6881 74.9307L42.4483 32.3832H55.2744L35.1191 86.0256H20.1553L0 32.3832Z" fill="#fff"/>
+<path d="M244.344 0C240.883 4.1227 237.941 8.31299 235.518 12.5709C233.096 16.7612 231.123 21.019 229.6 25.3445C228.077 29.67 226.97 34.0292 226.278 38.4223C225.585 42.8153 225.205 47.2083 225.135 51.6014C225.274 60.5226 226.797 69.2749 229.704 77.8583C232.611 86.374 237.457 94.7546 244.24 103H230.95C227.973 99.3504 225.378 95.4305 223.163 91.2402C220.948 87.1175 219.113 82.8596 217.66 78.4666C216.206 74.0059 215.099 69.5115 214.337 64.9833C213.645 60.4551 213.299 55.9944 213.299 51.6014C213.299 47.2083 213.645 42.7477 214.337 38.2195C215.099 33.6237 216.206 29.0955 217.66 24.6348C219.183 20.1742 221.052 15.8825 223.267 11.7598C225.482 7.56955 228.077 3.6496 231.054 0H244.344Z" fill="#fff"/>
+<path d="M294.955 103C301.808 94.7546 306.688 86.3402 309.595 77.7569C312.502 69.106 314.025 60.3537 314.163 51.5C314.025 42.5787 312.502 33.8264 309.595 25.2431C306.688 16.6598 301.842 8.24541 295.059 0H308.245C311.222 3.6496 313.817 7.56955 316.032 11.7598C318.247 15.8825 320.082 20.1742 321.535 24.6348C323.058 29.0279 324.166 33.5223 324.858 38.1181C325.619 42.6463 326 47.107 326 51.5C326 55.893 325.619 60.3875 324.858 64.9833C324.096 69.5115 322.954 74.0059 321.431 78.4666C319.978 82.8596 318.144 87.1175 315.929 91.2402C313.714 95.4305 311.118 99.3504 308.141 103H294.955Z" fill="#fff"/>
+<path d="M297.673 51.3885C297.673 56.8851 297.096 61.9066 295.943 66.4532C294.857 70.9319 293.126 74.7659 290.751 77.9553C288.444 81.1446 285.526 83.6215 281.997 85.3858C278.468 87.1501 274.294 88.0323 269.476 88.0323C264.658 88.0323 260.484 87.1841 256.955 85.4876C253.426 83.7233 250.508 81.2803 248.201 78.1588C245.894 75.0373 244.163 71.2712 243.009 66.8604C241.856 62.4495 241.279 57.5297 241.279 52.101C241.279 46.5366 241.822 41.4472 242.908 36.8328C243.993 32.2184 245.69 28.2487 247.997 24.9236C250.305 21.5985 253.223 19.0538 256.752 17.2895C260.348 15.4573 264.59 14.5412 269.476 14.5412C274.226 14.5412 278.366 15.4233 281.895 17.1877C285.424 18.952 288.342 21.4628 290.649 24.72C293.024 27.9772 294.789 31.8791 295.943 36.4256C297.096 40.9043 297.673 45.892 297.673 51.3885ZM252.985 51.3885C252.985 55.1208 253.257 58.5816 253.8 61.7709C254.343 64.9603 255.259 67.7425 256.548 70.1176C256.729 70.4408 256.917 70.7547 257.114 71.0593C258.321 72.9288 259.829 74.4471 261.638 75.6141C262.533 76.1627 263.52 76.5946 264.6 76.9098C266.057 77.3353 267.683 77.5481 269.476 77.5481C272.53 77.5481 275.109 76.9035 277.212 75.6141C279.316 74.257 281.013 72.4248 282.302 70.1176C283.592 67.7425 284.508 64.9603 285.051 61.7709C285.593 58.5816 285.865 55.1208 285.865 51.3885C285.865 47.7242 285.593 44.2973 285.051 41.1079C284.508 37.8507 283.592 35.0685 282.302 32.7613C282.102 32.3928 281.892 32.0366 281.673 31.6926C280.477 29.8194 278.99 28.3095 277.212 27.1629C276.301 26.5748 275.3 26.1142 274.21 25.7809C272.785 25.3451 271.207 25.1272 269.476 25.1272C266.354 25.1272 263.742 25.8057 261.638 27.1629C259.534 28.5201 257.838 30.3862 256.548 32.7613C255.259 35.0685 254.343 37.8507 253.8 41.1079C253.257 44.2973 252.985 47.7242 252.985 51.3885Z" fill="#fff"/>
+<path d="M130.455 27.1629H118.861V15.5701H130.455V27.1629Z" fill="#fff"/>
+<path d="M130.455 32.7177V77.5571H136.046V87.2512H112.956V77.5571H118.858V42.4118H112.956V32.7177H130.455Z" fill="#fff"/>
+<path d="M274.726 23.4442H283.983L264.466 79.5556H255.21L274.726 23.4442Z" fill="#fff"/>
+</svg>
diff --git a/.vitepress/theme/components/landing/6. get-started-section/GetStartedSection.vue b/.vitepress/theme/components/landing/6. get-started-section/GetStartedSection.vue
new file mode 100644
index 00000000..dae39c8b
--- /dev/null
+++ b/.vitepress/theme/components/landing/6. get-started-section/GetStartedSection.vue	
@@ -0,0 +1,292 @@
+<template>
+  <div class="get-started-section">
+    <div class="vite-chip">
+      <svg
+        width="134"
+        height="134"
+        viewBox="0 0 134 134"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <rect
+            class="vite-chip__background"
+            x="1"
+            y="1"
+            width="132"
+            height="132"
+            rx="10"
+            fill="black"
+            fill-opacity="0.3"
+          />
+          <rect
+            class="vite-chip__highlight"
+            x="1"
+            y="1"
+            width="132"
+            height="132"
+            rx="10"
+            fill="url(#linear-vite-chip-highlight)"
+            fill-opacity="0.1"
+          />
+          <rect
+            x="1"
+            y="1"
+            width="132"
+            height="132"
+            rx="10"
+            stroke="#111111"
+            stroke-opacity="0.2"
+            stroke-width="1"
+          />
+        </g>
+        <g opacity="0.6">
+          <rect
+            x="1"
+            y="1"
+            width="132"
+            height="132"
+            rx="10"
+            fill="#1E1E1E"
+            fill-opacity="0.4"
+          />
+          <rect
+            x="1"
+            y="1"
+            width="132"
+            height="132"
+            rx="10"
+            stroke="url(#radial-edge)"
+            stroke-width="1.15417"
+          />
+          <rect
+            x="1"
+            y="1"
+            width="132"
+            height="132"
+            rx="10"
+            stroke="url(#radial-edge-2)"
+            stroke-opacity="0.1"
+            stroke-width="1.15417"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="linear-vite-chip-highlight"
+            x1="6.92498"
+            y1="15.5812"
+            x2="113.685"
+            y2="116.571"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-opacity="0" />
+            <stop offset="0.37" stop-color="white" />
+            <stop offset="1" stop-opacity="0" />
+          </linearGradient>
+          <radialGradient
+            id="radial-edge"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(95.2187 56.5541) rotate(110.653) scale(80.173)"
+          >
+            <stop offset="0" stop-color="white" />
+            <stop offset="1" stop-opacity="0" />
+          </radialGradient>
+          <radialGradient
+            id="radial-edge-2"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(8.65624 122.919) rotate(-21.5713) scale(80.0504)"
+          >
+            <stop offset="0" stop-color="white" />
+            <stop offset="1" stop-opacity="0" />
+          </radialGradient>
+        </defs>
+      </svg>
+      <img src="/logo.svg" alt="Vite Logo" class="vite-chip__logo" />
+    </div>
+    <h2>さぁ、Vite で作ろう</h2>
+    <h3>
+      あなたの思考のスピードに追いつくことができる開発環境を用意しましょう。
+
+    </h3>
+    <a href="/guide/" class="btn btn--primary">はじめる</a>
+    <div class="glow glow--purple" />
+    <div class="glow glow--blue" />
+  </div>
+</template>
+
+<style scoped>
+.get-started-section {
+  margin: 0 auto;
+  padding-top: 260px;
+  padding-bottom: 220px;
+  position: relative;
+  overflow: hidden;
+
+  h2 {
+    color: #fff;
+    font-size: 44px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: -1px;
+    margin: 0 auto 20px;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+
+    @media (min-width: 768px) {
+      font-size: 52px;
+    }
+  }
+
+  h3 {
+    margin: 0 auto 40px;
+    color: #d4d4d8;
+    position: relative;
+    z-index: 1;
+  }
+
+  .btn {
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+  }
+
+  .vite-chip {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 84px;
+    aspect-ratio: 1;
+    filter: drop-shadow(0px 18px 33px rgba(0, 0, 0, 0.5));
+    margin: 0 auto 60px;
+    border: 1px solid #2b4659;
+    border-radius: 6px;
+    position: relative;
+    z-index: 1;
+
+    &:before {
+      content: '';
+      position: absolute;
+      bottom: -30px;
+      left: -20px;
+      width: 80px;
+      height: 80px;
+      background: linear-gradient(180deg, #61d9ff 0%, rgba(0, 0, 0, 0) 100%);
+      z-index: -1;
+      filter: blur(30px);
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: -20px;
+      right: -20px;
+      width: 80px;
+      height: 80px;
+      background: linear-gradient(
+        270deg,
+        #7a23a1 0%,
+        rgba(113, 94, 189, 0.9) 60%,
+        rgba(113, 94, 189, 0.9) 80%,
+        rgba(189, 52, 254, 0) 100%
+      );
+      z-index: -1;
+      filter: blur(30px);
+    }
+
+    svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      max-width: 100%;
+      z-index: 2;
+      border: 1px solid #2f2f2f;
+      border-radius: 5px;
+      filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.5));
+    }
+
+    .vite-chip__logo {
+      position: relative;
+      width: 50%;
+      opacity: 0.8;
+      z-index: 3;
+      filter: drop-shadow(
+        0 0 0.6rem color-mix(in srgb, #ffffad 50%, transparent)
+      );
+    }
+  }
+
+  .glow {
+    &.glow--blue {
+      position: absolute;
+      bottom: -15%;
+      left: -20%;
+      width: 80%;
+      aspect-ratio: 1.5;
+      pointer-events: none;
+      z-index: 0;
+      border-radius: 100%;
+      background: linear-gradient(180deg, #61d9ff 0%, rgba(0, 0, 0, 0) 100%);
+      filter: blur(15vw);
+      transform: none;
+      opacity: 0.5;
+
+      @media (min-width: 768px) {
+        filter: blur(10vw);
+        bottom: -30%;
+        left: -10%;
+        opacity: 0.2;
+      }
+
+      @media (min-width: 1025px) {
+        filter: blur(80px);
+        width: 900px;
+        left: calc(50% - 700px);
+      }
+    }
+
+    &.glow--purple {
+      position: absolute;
+      bottom: -15%;
+      right: -20%;
+      width: 80%;
+      aspect-ratio: 1.5;
+      pointer-events: none;
+      z-index: 0;
+      border-radius: 100%;
+      background: linear-gradient(
+        270deg,
+        #7a23a1 0%,
+        rgba(113, 94, 189, 0.9) 60%,
+        rgba(113, 94, 189, 0.9) 80%,
+        rgba(189, 52, 254, 0) 100%
+      );
+      filter: blur(15vw);
+      transform: none;
+      opacity: 0.6;
+
+      @media (min-width: 768px) {
+        filter: blur(10vw);
+        bottom: -30%;
+        right: -10%;
+        opacity: 0.3;
+      }
+
+      @media (min-width: 1025px) {
+        filter: blur(90px);
+        width: 1100px;
+        right: calc(50% - 700px);
+      }
+    }
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/landing/common/SvgNode.vue b/.vitepress/theme/components/landing/common/SvgNode.vue
new file mode 100644
index 00000000..8ac6c76b
--- /dev/null
+++ b/.vitepress/theme/components/landing/common/SvgNode.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { computed, Ref, ref, watch, ComputedRef } from 'vue'
+import { gsap } from 'gsap'
+
+/**
+ * A single glowing "node" (dot) on an SVG path.
+ */
+export interface SvgNodeProps {
+  /**
+   * The SVG path to draw the node on.
+   */
+  path: string
+
+  /**
+   * The position of the node along the path, represented as a percentage from 0-1.
+   */
+  position?: number
+
+  /**
+   * Whether the node is visible or not.
+   */
+  visible?: boolean
+
+  /**
+   * Whether the node label is visible or not.
+   */
+  labelVisible?: boolean
+
+  /**
+   * The label to display next to the node.
+   */
+  label?: string
+
+  /**
+   * The color of the glow effect.
+   */
+  glowColor?: string
+
+  /**
+   * The color of the dot.
+   */
+  dotColor?: string | boolean
+}
+
+const props = withDefaults(defineProps<SvgNodeProps>(), {
+  position: 0,
+  visible: false,
+  labelVisible: false,
+  glowColor: '#41D1FF',
+  dotColor: '#9fe6fd',
+})
+
+/**
+ * A unique id for the path, to avoid collisions in a single SVG output.
+ */
+const pathId: Ref<string> = ref(Math.random().toString(36))
+
+/**
+ * A ref for the path element in the SVG DOM.
+ */
+const pathElement: Ref<SVGPathElement | null> = ref(null)
+
+/**
+ * The radius on each side of the dot, represented as a glow on the SVG path.
+ */
+const gradientWidth: Ref<number> = ref(30)
+
+/**
+ * A scale factor for animating the gradient width.
+ */
+const gradientWidthScaleFactor: Ref<number> = ref(props.visible ? 1 : 0)
+
+/**
+ * The length of the SVG path.
+ */
+const pathLength: ComputedRef<number> = computed(() => {
+  if (!pathElement.value) return 0
+  return pathElement.value.getTotalLength()
+})
+
+/**
+ * The position of the dot on the SVG path.
+ */
+const dotPosition: Ref<{ x: number; y: number }> = ref({ x: 0, y: 0 })
+
+/**
+ * Watch for changes to the position of the dot.
+ */
+watch(
+  () => props.position,
+  () => {
+    if (!pathElement.value) return { x: 0, y: 0 }
+    const position = (1 - props.position) * pathLength.value
+    const { x, y } = pathElement.value.getPointAtLength(position)
+    dotPosition.value = { x, y }
+  },
+)
+
+/**
+ * The radius of the dot.
+ */
+const dotRadius: Ref<number> = ref(props.visible ? 3 : 0)
+
+/**
+ * Watch for changes to the visible prop and animate the glow and dot radius.
+ */
+watch(
+  () => props.visible,
+  (visible) => {
+    gsap.to(gradientWidthScaleFactor, {
+      duration: 0.5,
+      ease: 'power2.inOut',
+      value: visible ? 1 : 0,
+    })
+    gsap.to(dotRadius, {
+      duration: 0.6,
+      ease: 'power2.inOut',
+      value: visible ? 3 : 0,
+    })
+  },
+)
+</script>
+
+<template>
+  <g>
+    <path
+      ref="pathElement"
+      :d="props.path"
+      :stroke="`url(#glow_gradient_${pathId})`"
+      stroke-width="1.2"
+      :mask="`url(#glow_mask_${pathId})`"
+      class="svg-path"
+    />
+    <circle
+      v-if="props.dotColor"
+      :cx="dotPosition.x"
+      :cy="dotPosition.y"
+      :r="dotRadius"
+      :fill="props.dotColor ? props.dotColor : 'transparent'"
+      class="circle-dot"
+      :style="`--dot-color: ${props.dotColor}`"
+      key="circle-dot"
+    />
+    <text
+      v-if="props.label"
+      :x="dotPosition.x"
+      :y="dotPosition.y + 15"
+      fill="#a3a3a3"
+      font-family="Inter, sans-serif"
+      font-size="11px"
+      font-style="normal"
+      font-weight="400"
+      text-anchor="middle"
+      alignment-baseline="hanging"
+      class="label"
+      :class="{ 'label--visible': props.labelVisible }"
+    >
+      {{ props.label }}
+    </text>
+    <defs>
+      <mask :id="`glow_mask_${pathId}`">
+        <path :d="props.path" fill="black" />
+        <circle
+          :cx="dotPosition.x"
+          :cy="dotPosition.y"
+          :r="gradientWidth * gradientWidthScaleFactor"
+          fill="white"
+        />
+      </mask>
+      <radialGradient
+        :id="`glow_gradient_${pathId}`"
+        :cx="dotPosition.x"
+        :cy="dotPosition.y"
+        :r="gradientWidth * gradientWidthScaleFactor"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0%" :stop-color="props.glowColor" :stop-opacity="1" />
+        <stop offset="100%" :stop-color="props.glowColor" stop-opacity="0" />
+      </radialGradient>
+    </defs>
+  </g>
+</template>
+
+<style scoped>
+.svg-path {
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+}
+
+.label {
+  opacity: 0;
+  transition: opacity 0.4s ease-in-out;
+  display: none;
+  will-change: opacity;
+
+  @media (min-width: 1180px) {
+    display: block;
+  }
+
+  &.label--visible {
+    opacity: 1;
+  }
+}
+
+.circle-dot {
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  --dot-color: white;
+
+  @media (min-width: 768px) {
+    filter: drop-shadow(0 0 3px var(--dot-color));
+  }
+}
+</style>
diff --git a/.vitepress/theme/composables/sponsor.ts b/.vitepress/theme/composables/sponsor.ts
index 55bc82ad..973bd84f 100644
--- a/.vitepress/theme/composables/sponsor.ts
+++ b/.vitepress/theme/composables/sponsor.ts
@@ -48,7 +48,7 @@ const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
   ],
   gold: [
     // now automated via sponsors.vuejs.org too
-  ]
+  ],
 }
 
 function toggleDarkLogos() {
@@ -99,17 +99,17 @@ export function useSponsor() {
 function mapSponsors(sponsors: Sponsors) {
   return [
     {
-      tier: 'Special Sponsors',
+      tier: 'パートナーシップ',
       size: 'big',
       items: viteSponsors['special'],
     },
     {
-      tier: 'Platinum Sponsors',
+      tier: 'プラチナスポンサー',
       size: 'big',
       items: mapImgPath(sponsors['platinum']),
     },
     {
-      tier: 'Gold Sponsors',
+      tier: 'ゴールドスポンサー',
       size: 'medium',
       items: [...mapImgPath(sponsors['gold']), ...viteSponsors['gold']],
     },
diff --git a/.vitepress/theme/composables/useCardAnimation.ts b/.vitepress/theme/composables/useCardAnimation.ts
new file mode 100644
index 00000000..2a6c7c83
--- /dev/null
+++ b/.vitepress/theme/composables/useCardAnimation.ts
@@ -0,0 +1,107 @@
+import { type Ref, onMounted, onUnmounted, ref } from 'vue'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+/**
+ * A custom hook for animating a card element.
+ *
+ * @param {HTMLElement | string} el - The element or selector for the element to be animated
+ * @param {() => GSAPTimeline | null} animation - A function that returns a GSAP timeline for the animation
+ * @param {object} options - Options for the animation
+ */
+export function useCardAnimation(
+  el: HTMLElement | string,
+  animation: (() => GSAPTimeline) | undefined = undefined,
+  options?: {
+    /**
+     * A flag to indicate whether the animation should only run once, and not reset once complete.
+     */
+    once?: boolean
+  },
+) {
+  /**
+   * The GSAP timeline for this animation.
+   */
+  let timeline: GSAPTimeline | null
+
+  /**
+   * A flag to indicate whether the card is currently active or not.
+   * May be inactive while the animation is still finishing up, due to CSS transitions.
+   */
+  const isCardActive: Ref<boolean> = ref(false)
+
+  /**
+   * An internal flag to prevent multiple animations from running at the same time.
+   */
+  const isAnimationRunning: Ref<boolean> = ref(false)
+
+  /**
+   * Starts the card's animation, managing the lifecycle internally to prevent multiple animations from running at the same time.
+   */
+  const startAnimation = () => {
+    if (isAnimationRunning.value) {
+      return
+    } else {
+      isAnimationRunning.value = true
+      isCardActive.value = true
+    }
+    if (timeline) {
+      timeline.kill()
+    }
+    if (!animation) {
+      return
+    }
+    timeline = gsap.timeline({
+      onComplete: () => {
+        if (!options?.once) {
+          isCardActive.value = false
+          setTimeout(() => {
+            isAnimationRunning.value = false
+          }, 3000)
+        }
+      },
+    })
+    timeline.add(animation())
+  }
+
+  /**
+   * The ScrollTrigger instance for this card.
+   */
+  let scrollTriggerInstance: ScrollTrigger | null = null
+
+  /**
+   * Trigger's the card's animation automatically on mobile devices (no hover method)
+   */
+  onMounted(() => {
+    if (window.innerWidth < 768) {
+      scrollTriggerInstance = ScrollTrigger.create({
+        trigger: el,
+        start: 'top 60%',
+        onEnter: () => {
+          startAnimation()
+        },
+      })
+    }
+  })
+
+  /**
+   * Remove the ScrollTrigger and GSAP timeline instances when the component is unmounted
+   */
+  onUnmounted(() => {
+    if (scrollTriggerInstance) {
+      scrollTriggerInstance.kill()
+      scrollTriggerInstance = null
+    }
+    if (timeline) {
+      timeline.kill()
+      timeline = null
+    }
+  })
+
+  return {
+    startAnimation,
+    isCardActive,
+  }
+}
diff --git a/.vitepress/theme/composables/useSlideIn.ts b/.vitepress/theme/composables/useSlideIn.ts
new file mode 100644
index 00000000..e41cd898
--- /dev/null
+++ b/.vitepress/theme/composables/useSlideIn.ts
@@ -0,0 +1,19 @@
+import { nextTick, onMounted } from 'vue'
+import { gsap } from 'gsap'
+
+export function useSlideIn(el: HTMLElement | string) {
+  onMounted(async () => {
+    await nextTick(() => {
+      gsap.to(el, {
+        x: 0,
+        duration: 1,
+        ease: 'power3.out',
+        scrollTrigger: {
+          trigger: el,
+          start: 'top 100%',
+          once: true,
+        },
+      })
+    })
+  })
+}
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index d2303b78..7ce4bafe 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -4,7 +4,7 @@ import DefaultTheme from 'vitepress/theme'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import '@shikijs/vitepress-twoslash/style.css'
 import './styles/vars.css'
-import HomeSponsors from './components/HomeSponsors.vue'
+import './styles/landing.css'
 import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
 import 'virtual:group-icons.css'
@@ -13,7 +13,6 @@ export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors),
     })
   },
diff --git a/.vitepress/theme/styles/landing.css b/.vitepress/theme/styles/landing.css
new file mode 100644
index 00000000..b535baa0
--- /dev/null
+++ b/.vitepress/theme/styles/landing.css
@@ -0,0 +1,218 @@
+/* /////////////////////// */
+/* Landing Page CSS Styles */
+/* /////////////////////// */
+
+html:has(.landing) {
+  background-color: #101010;
+  --vp-c-bg: #101010;
+
+  body {
+    background-color: #101010;
+  }
+}
+
+.landing {
+  overflow-x: hidden;
+  background-color: #101010;
+
+  * {
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+    text-rendering: optimizeLegibility !important;
+  }
+
+  /* /////////////////// */
+  /* VitePress Overrides */
+  /* /////////////////// */
+
+  .VPNavBar,
+  .VPNavBar:not(.top) {
+    background: transparent !important;
+
+    @media (min-width: 768px) {
+      backdrop-filter: blur(10px);
+      background: rgba(15, 15, 15, 0.8) !important;
+      border-bottom: 1px solid #262626 !important;
+    }
+
+    .content-body {
+      background: none !important;
+    }
+  }
+
+  .VPFooter {
+    border-top: 1px solid #262626 !important;
+    background: radial-gradient(circle at top center, #0f151a 30%, #000000 80%);
+  }
+
+  .VPHome {
+    padding-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  /* /////////////// */
+  /* Force Dark Mode */
+  /* /////////////// */
+
+  .VPNavBarAppearance {
+    display: none;
+  }
+
+  .VPNavScreenAppearance {
+    visibility: hidden;
+  }
+
+  .social-links::before {
+    margin-left: 0 !important;
+  }
+
+  /* ////////// */
+  /* Typography */
+  /* ////////// */
+
+  h1 {
+    text-align: center;
+    font-family: 'Manrope', sans-serif;
+    font-style: normal;
+    font-weight: 600;
+    background: linear-gradient(
+      180deg,
+      #fff 0%,
+      rgba(255, 255, 255, 0.31) 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-wrap: balance;
+    cursor: default;
+    font-size: 44px;
+    line-height: 120%;
+    letter-spacing: -0.88px;
+    padding: 0 20px;
+    margin-bottom: 15px;
+
+    @media (min-width: 768px) {
+      font-size: 64px;
+      line-height: 81px;
+      letter-spacing: -1.28px;
+    }
+
+    @media (min-width: 1025px) {
+      font-size: 72px;
+      letter-spacing: -1.44px;
+      padding-bottom: 8px; /* Fix for hanging descender on "g" in "tooling" */
+    }
+  }
+
+  h2 {
+    display: block;
+    width: fit-content;
+    font-family: Manrope, sans-serif;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: -0.64px;
+    cursor: default;
+    text-wrap: balance;
+    padding: 0 20px;
+
+    @media (min-width: 768px) {
+      font-size: 44px;
+      letter-spacing: -0.88px;
+    }
+  }
+
+  h3 {
+    color: #a9a9a9;
+    text-align: center;
+    font-family: Inter, sans-serif;
+    font-size: 19px; /* 日本語版: 元は 20px */
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%;
+    letter-spacing: -0.4px;
+    max-width: 500px;
+    /* text-wrap: balance; 日本語版: 改行位置の調整のため無効化 */
+    cursor: default;
+    margin-bottom: 25px;
+    padding: 0 20px;
+  }
+
+  /* /////// */
+  /* Buttons */
+  /* /////// */
+
+  .btn {
+    display: flex;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+    color: #fff;
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease-in-out;
+    width: fit-content;
+
+    &:hover {
+      transform: translate3d(0, -2px, 0);
+    }
+
+    &.btn--primary {
+      position: relative;
+      background: radial-gradient(
+          141.42% 141.42% at 100% 0%,
+          rgba(255, 255, 255, 0.4) 0%,
+          rgba(255, 255, 255, 0) 100%
+        ),
+        radial-gradient(
+          140.35% 140.35% at 100% 94.74%,
+          #bd34fe 0%,
+          rgba(189, 52, 254, 0) 100%
+        ),
+        radial-gradient(
+          89.94% 89.94% at 18.42% 15.79%,
+          #41d1ff 0%,
+          rgba(65, 209, 255, 0) 100%
+        );
+      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.75) inset;
+
+      &:hover {
+        background: radial-gradient(
+            141.42% 141.42% at 100% 0%,
+            rgba(255, 255, 255, 0.5) 0%,
+            rgba(255, 255, 255, 0) 100%
+          ),
+          radial-gradient(
+            140.35% 140.35% at 100% 94.74%,
+            #bd34fe 0%,
+            rgba(189, 52, 254, 0) 100%
+          ),
+          radial-gradient(
+            89.94% 89.94% at 18.42% 15.79%,
+            #41d1ff 0%,
+            rgba(65, 209, 255, 0) 100%
+          );
+        box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.8) inset;
+      }
+    }
+
+    &.btn--outline {
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      &:hover {
+        border: 1px solid rgba(255, 255, 255, 0.4);
+      }
+    }
+
+    &.btn--rounded {
+      border-radius: 100px;
+    }
+  }
+}
diff --git a/.vitepress/theme/styles/vars.css b/.vitepress/theme/styles/vars.css
index e07a5704..189cf20c 100644
--- a/.vitepress/theme/styles/vars.css
+++ b/.vitepress/theme/styles/vars.css
@@ -2,7 +2,7 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --vp-c-brand: #646cff;
   --vp-c-brand-light: #747bff;
   --vp-c-brand-lighter: #9499ff;
@@ -28,43 +28,11 @@
   --vp-button-brand-active-bg: var(--vp-button-brand-bg);
 }
 
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    #bd34fe 30%,
-    #41d1ff
-  );
-
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #bd34fe 50%,
-    #47caff 50%
-  );
-  --vp-home-hero-image-filter: blur(40px);
-}
-
-@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(56px);
-  }
-}
-
-@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(72px);
-  }
-}
-
 /**
  * Component: Custom Block
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --vp-custom-block-tip-border: var(--vp-c-brand);
   --vp-custom-block-tip-text: var(--vp-c-brand-darker);
   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
diff --git a/.vitepress/theme/components/blog.data.ts b/_data/blog.data.ts
similarity index 100%
rename from .vitepress/theme/components/blog.data.ts
rename to _data/blog.data.ts
diff --git a/images/community/placeholder.jpg b/images/community/placeholder.jpg
new file mode 100644
index 00000000..5bd0f69a
Binary files /dev/null and b/images/community/placeholder.jpg differ
diff --git a/index.md b/index.md
index cb414385..3bac83f0 100644
--- a/index.md
+++ b/index.md
@@ -1,56 +1,47 @@
 ---
-layout: home
-
 title: Vite
 titleTemplate: 次世代フロントエンドツール
+pageClass: landing dark
 
-hero:
-  name: Vite
-  text: 次世代フロントエンドツール
-  tagline: 最先端をいく開発環境を構築しましょう
-  image:
-    src: /logo-with-shadow.png
-    alt: Vite
-  actions:
-    - theme: brand
-      text: Vite を始める
-      link: /guide/
-    - theme: alt
-      text: Vite を使う理由
-      link: /guide/why
-    - theme: alt
-      text: GitHub で見る
-      link: https://github.com/vitejs/vite
-    - theme: alt
-      text: ⚡ ViteConf 24!
-      link: https://viteconf.org/?utm=vite-homepage
-
-features:
-  - icon: 💡
-    title: 瞬時にスタートするサーバー
-    details: ネイティブ ESM により要求時にファイルが提供されるため、バンドルが不要です！
-  - icon: ⚡️
-    title: 超高速な HMR
-    details: アプリのサイズに関係なく高速を維持する HMR を提供します。
-  - icon: 🛠️
-    title: 豊富な機能
-    details: TypeScript、JSX、CSS などがすぐに使えるようにサポートされています。
-  - icon: 📦
-    title: 最適化されたビルド
-    details: 設定済みの Rollup によるビルドによってマルチページおよびライブラリーモードをサポートします。
-  - icon: 🔩
-    title:  ユニバーサルなプラグイン
-    details: 開発とビルドの間で共有される Rollup と互換性のあるプラグインを提供します。
-  - icon: 🔑
-    title: 完全に型定義がされている API
-    details: 完全な TypeScript の型定義を備えた柔軟なプログラミング志向の API です。
+layout: home
+aside: false
+editLink: false
+markdownStyles: false
 ---
 
-<style>
-.VPButton.alt[href="https://lu.ma/vite"] {
-  background: var(--vp-home-hero-name-background);
-  border: none;
-  padding: 1px 21px;
-  color: #fff !important;
-}
-</style>
+<script setup>
+import Hero from '.vitepress/theme/components/landing/1. hero-section/HeroSection.vue'
+import FeatureSection from './.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue'
+import FrameworksSection from './.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue'
+import CommunitySection from './.vitepress/theme/components/landing/4. community-section/CommunitySection.vue'
+import SponsorSection from './.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue'
+import GetStartedSection from '.vitepress/theme/components/landing/6. get-started-section/GetStartedSection.vue'
+import FeatureInstantServerStart from './.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue'
+import FeatureHMR from './.vitepress/theme/components/landing/2. feature-section/FeatureHMR.vue'
+import FeatureRichFeatures from './.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue'
+import FeatureOptimizedBuild from './.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue'
+import FeatureFlexiblePlugins from './.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue'
+import FeatureTypedAPI from './.vitepress/theme/components/landing/2. feature-section/FeatureTypedAPI.vue'
+import FeatureSSRSupport from './.vitepress/theme/components/landing/2. feature-section/FeatureSSRSupport.vue'
+import FeatureCI from './.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue'
+</script>
+
+<div class="VPHome">
+  <Hero/>
+  <FeatureSection title="開発者体験の再定義" description="Vite はウェブ開発を再びシンプルにします" type="blue">
+    <FeatureInstantServerStart />
+    <FeatureHMR />
+    <FeatureRichFeatures />
+    <FeatureOptimizedBuild />
+  </FeatureSection>
+  <FeatureSection title="ビルドのための共通基盤" type="pink" class="feature-section--flip">
+    <FeatureFlexiblePlugins />
+    <FeatureTypedAPI />
+    <FeatureSSRSupport />
+    <FeatureCI />
+  </FeatureSection>
+  <FrameworksSection />
+  <CommunitySection />
+  <SponsorSection />
+  <GetStartedSection />
+</div>
diff --git a/package.json b/package.json
index 66bb8c47..3d467413 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@types/express": "^4.17.21",
     "@types/node": "^20.16.10",
     "feed": "^4.2.2",
+    "gsap": "^3.12.4",
     "lint-staged": "^15.2.10",
     "textlint": "^13.4.1",
     "textlint-filter-rule-allowlist": "^4.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c8fdc91..feafc641 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       feed:
         specifier: ^4.2.2
         version: 4.2.2
+      gsap:
+        specifier: ^3.12.4
+        version: 3.12.5
       lint-staged:
         specifier: ^15.2.10
         version: 15.2.10
@@ -1178,6 +1181,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  gsap@3.12.5:
+    resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==}
+
   has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
 
@@ -3802,6 +3808,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  gsap@3.12.5: {}
+
   has-bigints@1.0.2: {}
 
   has-flag@4.0.0: {}
diff --git a/public/_redirects b/public/_redirects
index 5c262dda..4dc8a830 100644
--- a/public/_redirects
+++ b/public/_redirects
@@ -1,5 +1,5 @@
 # temporary, we'll flip this around some day
-https://ja.vite.dev/* https://ja.vitejs.dev/:splat 302!
+https://vitejs.dev/* https://vite.dev/:splat 301!
 
 /guide/api-vite-runtime /guide/api-environment 302
 /guide/api-vite-runtime.html /guide/api-environment 302
diff --git a/public/github.svg b/public/github.svg
new file mode 100644
index 00000000..a1e44f33
--- /dev/null
+++ b/public/github.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="github / 24 / Outline">
+<path id="Vector" d="M10.0003 1.87207C8.02158 1.87215 6.1074 2.57633 4.60032 3.85861C3.09324 5.14089 2.0916 6.91759 1.77463 8.87081C1.45765 10.824 1.84603 12.8263 2.87026 14.5194C3.8945 16.2124 5.48775 17.4858 7.36495 18.1116C7.78161 18.1846 7.93786 17.9346 7.93786 17.7158C7.93786 17.5179 7.92744 16.8616 7.92744 16.1637C5.83368 16.5491 5.29201 15.6533 5.12535 15.1846C4.94041 14.7287 4.64724 14.3247 4.27118 14.0075C3.97951 13.8512 3.56285 13.4658 4.26076 13.4554C4.52725 13.4843 4.78284 13.5771 5.00587 13.7258C5.22891 13.8744 5.41282 14.0747 5.54201 14.3096C5.65599 14.5143 5.80925 14.6946 5.99301 14.84C6.17676 14.9854 6.38741 15.0931 6.61287 15.157C6.83834 15.2209 7.07419 15.2396 7.30691 15.2122C7.53964 15.1847 7.76466 15.1116 7.96908 14.9971C8.00516 14.5734 8.19396 14.1773 8.50035 13.8825C6.64618 13.6742 4.70868 12.9554 4.70868 9.76793C4.69697 8.93972 5.00259 8.13841 5.56285 7.52835C5.30808 6.80853 5.33789 6.01858 5.64618 5.32001C5.64618 5.32001 6.34407 5.10125 7.93785 6.17418C9.30142 5.79916 10.7409 5.79916 12.1045 6.17418C13.6982 5.09085 14.3962 5.32001 14.3962 5.32001C14.7045 6.01857 14.7343 6.80853 14.4795 7.52835C15.0415 8.13737 15.3473 8.93937 15.3337 9.76793C15.3337 12.9658 13.3857 13.6742 11.5316 13.8825C11.7305 14.0841 11.8836 14.3261 11.9807 14.5921C12.0778 14.8581 12.1164 15.1419 12.0941 15.4242C12.0941 16.5388 12.0837 17.4346 12.0837 17.7158C12.0837 17.9346 12.2399 18.195 12.6566 18.1117C14.5305 17.4807 16.1192 16.2044 17.139 14.5104C18.1589 12.8165 18.5436 10.8153 18.2244 8.86393C17.9052 6.91261 16.903 5.13821 15.3966 3.8575C13.8901 2.57678 11.9776 1.8731 10.0003 1.87207Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/heart.svg b/public/heart.svg
new file mode 100644
index 00000000..142e518c
--- /dev/null
+++ b/public/heart.svg
@@ -0,0 +1,137 @@
+<svg
+  width="58"
+  height="55"
+  viewBox="0 0 58 55"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g filter="url(#filter0_f_693_14740)">
+    <path
+      d="M29 43.2447L26.39 40.9494C23.36 38.2714 20.855 35.9613 18.875 34.0191C16.895 32.0769 15.32 30.333 14.15 28.7874C12.98 27.2431 12.1628 25.8235 11.6984 24.5287C11.234 23.2338 11.0012 21.9096 11 20.5559C11 17.7897 11.945 15.4796 13.835 13.6257C15.725 11.7717 18.08 10.8447 20.9 10.8447C22.46 10.8447 23.945 11.1684 25.355 11.8158C26.765 12.4633 27.98 13.3755 29 14.5526C30.02 13.3755 31.235 12.4633 32.645 11.8158C34.055 11.1684 35.54 10.8447 37.1 10.8447C39.92 10.8447 42.275 11.7717 44.165 13.6257C46.055 15.4796 47 17.7897 47 20.5559C47 21.9096 46.7672 23.2338 46.3016 24.5287C45.836 25.8235 45.0188 27.2431 43.85 28.7874C42.68 30.333 41.105 32.0769 39.125 34.0191C37.145 35.9613 34.64 38.2714 31.61 40.9494L29 43.2447Z"
+      fill="url(#paint0_linear_693_14740)"
+    />
+    <path
+      d="M29 43.2447L26.39 40.9494C23.36 38.2714 20.855 35.9613 18.875 34.0191C16.895 32.0769 15.32 30.333 14.15 28.7874C12.98 27.2431 12.1628 25.8235 11.6984 24.5287C11.234 23.2338 11.0012 21.9096 11 20.5559C11 17.7897 11.945 15.4796 13.835 13.6257C15.725 11.7717 18.08 10.8447 20.9 10.8447C22.46 10.8447 23.945 11.1684 25.355 11.8158C26.765 12.4633 27.98 13.3755 29 14.5526C30.02 13.3755 31.235 12.4633 32.645 11.8158C34.055 11.1684 35.54 10.8447 37.1 10.8447C39.92 10.8447 42.275 11.7717 44.165 13.6257C46.055 15.4796 47 17.7897 47 20.5559C47 21.9096 46.7672 23.2338 46.3016 24.5287C45.836 25.8235 45.0188 27.2431 43.85 28.7874C42.68 30.333 41.105 32.0769 39.125 34.0191C37.145 35.9613 34.64 38.2714 31.61 40.9494L29 43.2447Z"
+      fill="url(#paint1_radial_693_14740)"
+      fill-opacity="0.7"
+    />
+    <path
+      d="M29 43.2447L26.39 40.9494C23.36 38.2714 20.855 35.9613 18.875 34.0191C16.895 32.0769 15.32 30.333 14.15 28.7874C12.98 27.2431 12.1628 25.8235 11.6984 24.5287C11.234 23.2338 11.0012 21.9096 11 20.5559C11 17.7897 11.945 15.4796 13.835 13.6257C15.725 11.7717 18.08 10.8447 20.9 10.8447C22.46 10.8447 23.945 11.1684 25.355 11.8158C26.765 12.4633 27.98 13.3755 29 14.5526C30.02 13.3755 31.235 12.4633 32.645 11.8158C34.055 11.1684 35.54 10.8447 37.1 10.8447C39.92 10.8447 42.275 11.7717 44.165 13.6257C46.055 15.4796 47 17.7897 47 20.5559C47 21.9096 46.7672 23.2338 46.3016 24.5287C45.836 25.8235 45.0188 27.2431 43.85 28.7874C42.68 30.333 41.105 32.0769 39.125 34.0191C37.145 35.9613 34.64 38.2714 31.61 40.9494L29 43.2447Z"
+      fill="url(#paint2_radial_693_14740)"
+      fill-opacity="0.7"
+    />
+  </g>
+  <path
+    d="M29.001 42.945L26.536 40.735C23.6743 38.1567 21.3085 35.9325 19.4385 34.0625C17.5685 32.1925 16.081 30.5135 14.976 29.0254C13.871 27.5385 13.0992 26.1717 12.6606 24.925C12.222 23.6783 12.0021 22.4033 12.001 21.1C12.001 18.4367 12.8935 16.2125 14.6785 14.4275C16.4635 12.6425 18.6876 11.75 21.351 11.75C22.8243 11.75 24.2268 12.0617 25.5585 12.685C26.8901 13.3083 28.0376 14.1867 29.001 15.32C29.9643 14.1867 31.1118 13.3083 32.4435 12.685C33.7751 12.0617 35.1776 11.75 36.651 11.75C39.3143 11.75 41.5385 12.6425 43.3235 14.4275C45.1085 16.2125 46.001 18.4367 46.001 21.1C46.001 22.4033 45.7811 23.6783 45.3414 24.925C44.9016 26.1717 44.1298 27.5385 43.026 29.0254C41.921 30.5135 40.4335 32.1925 38.5635 34.0625C36.6935 35.9325 34.3276 38.1567 31.466 40.735L29.001 42.945Z"
+    fill="#141215"
+  />
+  <path
+    d="M29.001 42.945L26.536 40.735C23.6743 38.1567 21.3085 35.9325 19.4385 34.0625C17.5685 32.1925 16.081 30.5135 14.976 29.0254C13.871 27.5385 13.0992 26.1717 12.6606 24.925C12.222 23.6783 12.0021 22.4033 12.001 21.1C12.001 18.4367 12.8935 16.2125 14.6785 14.4275C16.4635 12.6425 18.6876 11.75 21.351 11.75C22.8243 11.75 24.2268 12.0617 25.5585 12.685C26.8901 13.3083 28.0376 14.1867 29.001 15.32C29.9643 14.1867 31.1118 13.3083 32.4435 12.685C33.7751 12.0617 35.1776 11.75 36.651 11.75C39.3143 11.75 41.5385 12.6425 43.3235 14.4275C45.1085 16.2125 46.001 18.4367 46.001 21.1C46.001 22.4033 45.7811 23.6783 45.3414 24.925C44.9016 26.1717 44.1298 27.5385 43.026 29.0254C41.921 30.5135 40.4335 32.1925 38.5635 34.0625C36.6935 35.9325 34.3276 38.1567 31.466 40.735L29.001 42.945Z"
+    fill="url(#paint3_linear_693_14740)"
+  />
+  <path
+    d="M29.001 42.945L26.536 40.735C23.6743 38.1567 21.3085 35.9325 19.4385 34.0625C17.5685 32.1925 16.081 30.5135 14.976 29.0254C13.871 27.5385 13.0992 26.1717 12.6606 24.925C12.222 23.6783 12.0021 22.4033 12.001 21.1C12.001 18.4367 12.8935 16.2125 14.6785 14.4275C16.4635 12.6425 18.6876 11.75 21.351 11.75C22.8243 11.75 24.2268 12.0617 25.5585 12.685C26.8901 13.3083 28.0376 14.1867 29.001 15.32C29.9643 14.1867 31.1118 13.3083 32.4435 12.685C33.7751 12.0617 35.1776 11.75 36.651 11.75C39.3143 11.75 41.5385 12.6425 43.3235 14.4275C45.1085 16.2125 46.001 18.4367 46.001 21.1C46.001 22.4033 45.7811 23.6783 45.3414 24.925C44.9016 26.1717 44.1298 27.5385 43.026 29.0254C41.921 30.5135 40.4335 32.1925 38.5635 34.0625C36.6935 35.9325 34.3276 38.1567 31.466 40.735L29.001 42.945Z"
+    fill="url(#paint4_radial_693_14740)"
+    fill-opacity="0.7"
+  />
+  <path
+    d="M29.001 42.945L26.536 40.735C23.6743 38.1567 21.3085 35.9325 19.4385 34.0625C17.5685 32.1925 16.081 30.5135 14.976 29.0254C13.871 27.5385 13.0992 26.1717 12.6606 24.925C12.222 23.6783 12.0021 22.4033 12.001 21.1C12.001 18.4367 12.8935 16.2125 14.6785 14.4275C16.4635 12.6425 18.6876 11.75 21.351 11.75C22.8243 11.75 24.2268 12.0617 25.5585 12.685C26.8901 13.3083 28.0376 14.1867 29.001 15.32C29.9643 14.1867 31.1118 13.3083 32.4435 12.685C33.7751 12.0617 35.1776 11.75 36.651 11.75C39.3143 11.75 41.5385 12.6425 43.3235 14.4275C45.1085 16.2125 46.001 18.4367 46.001 21.1C46.001 22.4033 45.7811 23.6783 45.3414 24.925C44.9016 26.1717 44.1298 27.5385 43.026 29.0254C41.921 30.5135 40.4335 32.1925 38.5635 34.0625C36.6935 35.9325 34.3276 38.1567 31.466 40.735L29.001 42.945Z"
+    fill="url(#paint5_radial_693_14740)"
+    fill-opacity="0.7"
+  />
+  <path
+    d="M15.4574 28.6676L15.4573 28.6675C14.375 27.2111 13.6387 25.8979 13.2263 24.7258C12.8099 23.5421 12.6018 22.3343 12.6007 21.0997C12.6008 18.5859 13.4368 16.5174 15.1025 14.8517C16.7683 13.1859 18.8368 12.3499 21.3507 12.3499C22.7363 12.3499 24.052 12.6424 25.3039 13.2284C26.5567 13.8148 27.6353 14.64 28.5436 15.7085L29.0007 16.2464L29.4579 15.7085C30.3662 14.64 31.4448 13.8148 32.6976 13.2284C33.9495 12.6424 35.2651 12.3499 36.6507 12.3499C39.1647 12.3499 41.2332 13.1859 42.899 14.8517C44.5647 16.5175 45.4007 18.586 45.4007 21.0999C45.4007 22.3343 45.1927 23.5419 44.7753 24.7254C44.3617 25.8978 43.6253 27.2112 42.544 28.6676C41.4622 30.1245 39.9962 31.781 38.139 33.6382C36.2789 35.4983 33.9213 37.7149 31.0643 40.289C31.0642 40.2891 31.0642 40.2891 31.0641 40.2892L29.0007 42.1391L26.9374 40.2892C26.9372 40.2891 26.9371 40.2889 26.937 40.2888C24.0801 37.7148 21.7226 35.4982 19.8625 33.6382C18.0053 31.781 16.5393 30.1245 15.4574 28.6676Z"
+    stroke="white"
+    stroke-opacity="0.3"
+    stroke-width="1.2"
+  />
+  <defs>
+    <filter
+      id="filter0_f_693_14740"
+      x="0.2"
+      y="0.0447264"
+      width="57.6"
+      height="54"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feGaussianBlur
+        stdDeviation="5.4"
+        result="effect1_foregroundBlur_693_14740"
+      />
+    </filter>
+    <linearGradient
+      id="paint0_linear_693_14740"
+      x1="29"
+      y1="10.8447"
+      x2="29"
+      y2="43.2447"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#BD34FE" />
+      <stop offset="1" stop-color="#AD00FF" stop-opacity="0.24" />
+    </linearGradient>
+    <radialGradient
+      id="paint1_radial_693_14740"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(40.4345 13.6435) rotate(115.368) scale(29.6563 32.7229)"
+    >
+      <stop stop-color="#FF9CF5" />
+      <stop offset="1" stop-color="#FFBFF9" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient
+      id="paint2_radial_693_14740"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(11.2109 19.2521) rotate(23.4546) scale(36.0107 38.7396)"
+    >
+      <stop stop-color="white" />
+      <stop offset="1" stop-color="white" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient
+      id="paint3_linear_693_14740"
+      x1="29.001"
+      y1="11.75"
+      x2="29.001"
+      y2="42.945"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#BD34FE" />
+      <stop offset="1" stop-color="#AD00FF" stop-opacity="0.24" />
+    </linearGradient>
+    <radialGradient
+      id="paint4_radial_693_14740"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(39.8002 14.4447) rotate(114.944) scale(28.4542 31.0127)"
+    >
+      <stop stop-color="#FF9CF5" />
+      <stop offset="1" stop-color="#FFBFF9" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient
+      id="paint5_radial_693_14740"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(12.2002 19.8447) rotate(23.8602) scale(34.1157 37.1833)"
+    >
+      <stop stop-color="white" />
+      <stop offset="1" stop-color="white" stop-opacity="0" />
+    </radialGradient>
+  </defs>
+</svg>
diff --git a/public/logo-home.svg b/public/logo-home.svg
new file mode 100644
index 00000000..0942f44d
--- /dev/null
+++ b/public/logo-home.svg
@@ -0,0 +1,46 @@
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g opacity="1" clip-path="url(#clip0_693_14578)">
+    <g style="mix-blend-mode:luminosity" opacity="0.5" filter="url(#filter0_i_693_14578)">
+      <path d="M65.7194 10.0473L35.6655 64.587C35.045 65.7131 33.4508 65.7197 32.821 64.5991L2.17117 10.0525C1.48502 8.83141 2.51394 7.35228 3.87747 7.59962L33.9635 13.0572C34.1555 13.092 34.3519 13.0917 34.5439 13.0562L64.0008 7.60744C65.3597 7.35608 66.3935 8.82375 65.7194 10.0473Z" fill="url(#paint0_linear_693_14578)"/>
+    </g>
+    <g style="mix-blend-mode:luminosity" filter="url(#filter1_bd_693_14578)">
+      <path d="M48.295 0.441298L26.0542 4.86401C25.6887 4.9367 25.418 5.25109 25.396 5.62839L24.0278 29.078C23.9957 29.6303 24.4955 30.059 25.0267 29.9346L31.2188 28.4844C31.7982 28.3488 32.3217 28.8666 32.2026 29.4579L30.3629 38.6003C30.2391 39.2156 30.8083 39.7417 31.4004 39.5592L35.225 38.38C35.8179 38.1973 36.3876 38.7249 36.2622 39.3407L33.3386 53.7014C33.1557 54.5997 34.333 55.0895 34.824 54.3193L35.152 53.805L53.275 17.1002C53.5785 16.4856 53.0552 15.7848 52.39 15.9151L46.0163 17.1635C45.4173 17.2807 44.9077 16.7146 45.0767 16.1199L49.2368 1.48437C49.406 0.888652 48.8946 0.322077 48.295 0.441298Z" fill="url(#paint1_linear_693_14578)" fill-opacity="0.6" shape-rendering="crispEdges"/>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_i_693_14578" x="1.95264" y="7.57227" width="63.9785" height="60.1716" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2.30833"/>
+      <feGaussianBlur stdDeviation="5.77083"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
+      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_693_14578"/>
+    </filter>
+    <filter id="filter1_bd_693_14578" x="19.4097" y="-4.19137" width="38.5702" height="63.5097" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.30833"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_693_14578"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1.15417"/>
+      <feGaussianBlur stdDeviation="1.15417"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend mode="normal" in2="effect1_backgroundBlur_693_14578" result="effect2_dropShadow_693_14578"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_693_14578" result="shape"/>
+    </filter>
+    <linearGradient id="paint0_linear_693_14578" x1="1.42283" y1="5.65045" x2="39.5455" y2="56.6664" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#41D1FF"/>
+      <stop offset="1" stop-color="#BD34FE"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_693_14578" x1="32.2366" y1="1.64206" x2="39.201" y2="48.718" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFEA83"/>
+      <stop offset="0.0833333" stop-color="#FFDD35"/>
+      <stop offset="1" stop-color="#FFA800"/>
+    </linearGradient>
+    <clipPath id="clip0_693_14578">
+      <rect width="66.9687" height="66.9687" fill="white" transform="translate(0.442871 0.180176)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/public/noise.png b/public/noise.png
new file mode 100644
index 00000000..fd9a7cf2
Binary files /dev/null and b/public/noise.png differ