diff --git a/.prettierrc b/.prettierrc
index 815f69b..c18d43c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,9 +2,11 @@
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
   "singleQuote": true,
-  "printWidth": 100,
-  "plugins": ["prettier-plugin-tailwindcss"],
   "tailwindStylesheet": "./assets/styles/main.css",
   "tailwindConfig": "./tailwind.config.js",
-  "tailwindFunctions": ["clsx"]
+  "tailwindFunctions": ["clsx"],
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "printWidth": 100,
+  "bracketSpacing": true
 }
diff --git a/assets/images/bg.jpg b/assets/images/bg.jpg
deleted file mode 100644
index 15590a3..0000000
Binary files a/assets/images/bg.jpg and /dev/null differ
diff --git a/assets/styles/base.css b/assets/styles/base.css
index 5ee0ec5..a3af8e6 100644
--- a/assets/styles/base.css
+++ b/assets/styles/base.css
@@ -1,6 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .clip-arrow-right {
+    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
+  }
+
+  .clip-arrow-both {
+    clip-path: polygon(
+      20px 0%,
+      calc(100% - 20px) 0%,
+      100% 50%,
+      calc(100% - 20px) 100%,
+      20px 100%,
+      0% 50%
+    );
+  }
+
+  .clip-arrow-left {
+    clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 20px 100%, 0% 50%);
+  }
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
diff --git a/layouts/default.vue b/layouts/default.vue
index b1bf699..cbe2ec4 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,106 +1,111 @@
 <template>
-  <div>
-    <header
-      class="z-1000 fixed left-0 right-0 top-[-1] w-full bg-transparent duration-300"
-      :class="{ 'backdrop-blur-2xl': isScrolled || isNavbarOpen, 'h-full': isNavbarOpen }"
+  <header
+    class="fixed left-0 right-0 top-0 z-50 w-full bg-transparent"
+    :class="{
+      'backdrop-blur-2xl': isScrolled || isNavbarOpen,
+      'h-full': isNavbarOpen,
+    }"
+  >
+    <div
+      class="header-bg max-w-[1920px] mx-auto flex h-17 sm:h-13 w-full items-center justify-between px-28 sm:px-6 md:px-[88px]"
     >
-      <div class="header-bg flex h-13 w-full items-center justify-between px-6 sm:px-4 md:px-8">
-        <h1 class="text-2xl font-bold text-[#52AC63]">BTDK</h1>
-        <nav class="absolute left-0 right-0 top-0">
-          <ul class="flex justify-center gap-8 leading-13 text-white sm:hidden md:hidden">
-            <li
-              v-for="nav in navItems"
-              :key="nav.path"
-              class="relative h-full text-inherit after:absolute after:bottom-2 after:left-0 after:right-0 after:h-[1px] after:w-full after:origin-top-right after:scale-x-0 after:bg-[#52AC63] after:transition-[transform] after:duration-300 after:content-[''] hover:after:origin-top-left hover:after:scale-x-100"
-            >
-              <NuxtLink :to="nav.path" class="text-inherit">
-                {{ nav.name }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </nav>
-        <Menu as="div" class="hidden h-full sm:block md:block" v-slot="{ open: menuOpen }">
-          <MenuButton class="h-full">
-            <div
-              class="navbar-control"
-              :class="{ open: isNavbarOpen }"
-              @click="toggleNavbar(menuOpen)"
-            >
-              <span class="control-icon"></span>
-              <span class="control-icon"></span>
-              <span class="control-icon"></span>
-            </div>
-          </MenuButton>
-          <transition
-            enter-active-class="transition-all duration-300 overflow-hidden"
-            enter-from-class="max-h-0 opacity-70"
-            enter-to-class="h-full opacity-100"
-            leave-active-class="transition-all duration-200 overflow-hidden"
-            leave-from-class="h-full opacity-100"
-            leave-to-class="max-h-0 opacity-70"
+      <h1 class="text-3xl md:text-2xl sm:text-base font-bold text-[#52AC63]">BTDK</h1>
+      <nav class="absolute inset-0">
+        <ul
+          class="flex justify-center text-xl gap-x-4 leading-17 sm:leading-13 text-white sm:hidden md:hidden"
+        >
+          <li
+            v-for="nav in navItems"
+            :key="nav.path"
+            class="relative h-full w-32 text-center text-inherit after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-full after:origin-top-right after:scale-x-0 after:bg-[#52AC63] after:transition-[transform] after:duration-300 after:content-[''] hover:after:origin-top-left hover:after:scale-x-100"
+            @click="onNavPush(nav)"
           >
-            <!-- lg:ml-[-110px] flex justify-center md:justify-start md:flex-col md:text-center md:overflow-auto md:grow-[1]  -->
-            <div v-show="isNavbarOpen">
-              <MenuItems
-                as="ul"
-                class="header-bg z-1000 border-t-1 absolute inset-0 top-13 overflow-hidden border-t-[1px] border-[hsla(0,0%,100%,.06)] text-white backdrop-blur-2xl"
-                static
-              >
-                <template v-for="nav in navItems" :key="nav.path">
-                  <MenuItem
-                    as="li"
-                    v-slot="{ close }"
-                    class="cursor-pointer text-nowrap text-center"
-                    @click="onNavClick(nav, menuOpen)"
-                  >
-                    <Disclosure as="div" class="size-full" v-slot="{ open }">
-                      <DisclosureButton as="p" class="relative py-7">
-                        <span>{{ nav.name }} </span>
-                        <Icon
-                          name="mingcute:up-line"
-                          :class="open ? '' : 'rotate-180 transform'"
-                          class="absolute right-5 top-1/2 -translate-y-1/2 text-lg transition-transform duration-300"
-                          :ssr="true"
-                          v-if="!!nav.children?.length"
-                        />
-                      </DisclosureButton>
-                      <transition
-                        enter-active-class="transition-all duration-700 overflow-hidden"
-                        enter-from-class="max-h-0 opacity-70"
-                        enter-to-class="max-h-[300px] opacity-100"
-                        leave-active-class="transition-all duration-200 overflow-hidden"
-                        leave-from-class="max-h-[300px] opacity-100"
-                        leave-to-class="max-h-0 opacity-70"
-                      >
-                        <DisclosurePanel as="div" v-if="!!nav.children?.length">
-                          <ul class="flex flex-col bg-[hsla(0,0%,100%,.06)]">
-                            <li
-                              class="text-nowrap py-7 text-center"
-                              v-for="child in nav.children"
-                              :key="child.path"
-                              @click="onNavClick(child, menuOpen)"
-                            >
-                              <span>
-                                {{ child.name }}
-                              </span>
-                            </li>
-                          </ul>
-                        </DisclosurePanel>
-                      </transition>
-                    </Disclosure>
-                  </MenuItem>
-                </template>
-              </MenuItems>
-            </div>
-          </transition>
-        </Menu>
-      </div>
-    </header>
-    <slot />
-    <footer>
-      <p>版权所有 © 2025 比特电科</p>
-    </footer>
-  </div>
+            <span class="text-inherit">
+              {{ nav.name }}
+            </span>
+          </li>
+        </ul>
+      </nav>
+      <Menu as="div" class="hidden h-full sm:block md:block" v-slot="{ open: menuOpen }">
+        <MenuButton class="h-full">
+          <div
+            class="navbar-control"
+            :class="{ open: isNavbarOpen }"
+            @click="toggleNavbar(menuOpen)"
+          >
+            <span class="control-icon"></span>
+            <span class="control-icon"></span>
+            <span class="control-icon"></span>
+          </div>
+        </MenuButton>
+        <transition
+          enter-active-class="transition-all duration-300 overflow-hidden"
+          enter-from-class="max-h-0 opacity-70"
+          enter-to-class="h-full opacity-100"
+          leave-active-class="transition-all duration-300 overflow-hidden"
+          leave-from-class="h-full opacity-100"
+          leave-to-class="max-h-0 opacity-70"
+        >
+          <div v-show="isNavbarOpen">
+            <MenuItems
+              as="ul"
+              class="header-bg border-t-1 absolute inset-0 top-17 sm:top-13 z-50 overflow-hidden border-t-[1px] border-[hsla(0,0%,100%,.06)] text-white backdrop-blur-2xl"
+              static
+            >
+              <template v-for="nav in navItems" :key="nav.path">
+                <MenuItem
+                  as="li"
+                  v-slot="{ close }"
+                  class="cursor-pointer text-nowrap text-center text-base md:text-lg"
+                  @click="onNavClick(nav, menuOpen)"
+                >
+                  <Disclosure as="div" class="size-full" v-slot="{ open }">
+                    <DisclosureButton as="p" class="relative py-7">
+                      <span>{{ nav.name }} </span>
+                      <Icon
+                        name="mingcute:up-line"
+                        :class="open ? '' : 'rotate-180 transform'"
+                        class="absolute right-5 top-1/2 -translate-y-1/2 transition-transform duration-300"
+                        :ssr="true"
+                        v-if="!!nav.children?.length"
+                      />
+                    </DisclosureButton>
+                    <transition
+                      enter-active-class="transition-all duration-700 overflow-hidden"
+                      enter-from-class="max-h-0 opacity-70"
+                      enter-to-class="max-h-[300px] opacity-100"
+                      leave-active-class="transition-all duration-300 overflow-hidden"
+                      leave-from-class="max-h-[300px] opacity-100"
+                      leave-to-class="max-h-0 opacity-70"
+                    >
+                      <DisclosurePanel as="div" v-if="!!nav.children?.length">
+                        <ul class="flex flex-col bg-[hsla(0,0%,100%,.06)]">
+                          <li
+                            class="text-nowrap py-7 text-center"
+                            v-for="child in nav.children"
+                            :key="child.path"
+                            @click="onNavClick(child, menuOpen)"
+                          >
+                            <span>
+                              {{ child.name }}
+                            </span>
+                          </li>
+                        </ul>
+                      </DisclosurePanel>
+                    </transition>
+                  </Disclosure>
+                </MenuItem>
+              </template>
+            </MenuItems>
+          </div>
+        </transition>
+      </Menu>
+    </div>
+  </header>
+  <slot />
+  <footer>
+    <p>版权所有 © 2025 比特电科</p>
+  </footer>
 </template>
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
@@ -127,14 +132,18 @@ onUnmounted(() => {
 
 const isNavbarOpen = ref(false)
 const toggleNavbar = (open: boolean) => {
-  isNavbarOpen.value = !open
+  isNavbarOpen.value = !isNavbarOpen.value
+}
+
+function onNavPush(nav: any) {
+  router.push(nav.path)
 }
 
 function onNavClick(nav: any, menuOpen: boolean) {
   if (!!nav.children?.length) {
     return
   }
-  router.push(nav.path)
+  onNavPush(nav)
   isNavbarOpen.value = false
 }
 
@@ -167,13 +176,13 @@ const navItems = [
   },
   {
     name: '关于我们',
-    path: '/about',
+    path: '/aboutUs',
   },
 ]
 </script>
 <style scoped>
 .header-bg {
-  @apply bg-[rgba(92,92,92,0.4)] bg-gradient-to-r from-black/40 to-black/40;
+  /* @apply bg-[rgba(92,92,92,0.4)] bg-gradient-to-r from-black/40 to-black/40; */
 }
 
 /* 子菜单展开收缩动画 */
@@ -205,7 +214,7 @@ const navItems = [
   height: 1px;
   transition:
     transform 0.3s ease 0.2s,
-    background-color 0.4s ease 0s;
+    background-color 0.3s ease 0s;
   width: 22px;
   opacity: 0.9;
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2243f83..6cc9663 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,12 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
-  modules: ['motion-v/nuxt', '@nuxtjs/tailwindcss', 'shadcn-nuxt', '@nuxt/icon'],
+  modules: [
+    'motion-v/nuxt',
+    '@nuxtjs/tailwindcss',
+    'shadcn-nuxt',
+    '@nuxt/icon',
+    'nuxt-swiper',
+  ],
   devtools: { enabled: true },
   postcss: {
     plugins: {
diff --git a/package.json b/package.json
index 21635b0..cca3cba 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "lucide-vue-next": "^0.486.0",
     "motion-v": "1.0.0-alpha.1",
     "nuxt": "^3.16.1",
+    "nuxt-swiper": "2.0.0",
     "reka-ui": "^2.1.1",
     "shadcn-nuxt": "1.0.3",
     "simplex-noise": "^4.0.3",
diff --git a/pages/index.vue b/pages/index.vue
index 807ee8d..e15971e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,146 @@
 <template>
-  <main class="h-screen w-full">
-    <img src="../assets/images/bg.jpg" class="h-[32rem] w-full object-cover" />
+  <main class="w-full bg-black lg:min-w-[1200px]">
+    <ClientOnly>
+      <div
+        class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]"
+      >
+        <swiper-container
+          ref="containerRef"
+          class="max-w-[1920px] size-full mx-auto"
+          :autoplay="{ delay: 3000 }"
+          loop
+          pagination
+        >
+          <swiper-slide v-for="(slide, idx) in slides" :key="idx" class="size-full relative">
+            <img
+              src="/public/images/banner/device_lg.png"
+              loading="eager"
+              class="absolute right-0 h-[100%] object-cover sm:hidden"
+            />
+            <img src="/public/images/banner/device_sm.png" alt="" class="sm:block hidden" />
+            <div class="swiper-banner-info">
+              <h6 class="text-2xl md:text-lg lg:text-xl sm:text-xs font-bold">
+                {{ slide.title }}
+              </h6>
+              <h2
+                class="text-4xl lg:text-3xl md:text-2xl sm:text-base overflow-hidden font-bold text-ellipsis whitespace-pre-line break-words"
+              >
+                {{ slide.subtitle }}
+              </h2>
+              <div
+                v-if="slide.tags"
+                class="flex gap-4 sm:gap-2 text-lg lg:text-base md:text-base sm:text-sm"
+              >
+                <p
+                  v-for="(tag, index) in slide.tags"
+                  :key="index"
+                  class="rounded-full bg-gradient-to-r from-[#69AA25] to-[#13A892] px-[28px] py-[6px] md:px-[16px] md:py-[4px] sm:px-[12px] sm:py-[4px]"
+                >
+                  {{ tag }}
+                </p>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper-container>
+      </div>
+    </ClientOnly>
+    <div>
+      <h2
+        class="pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] text-5xl md:text-4xl sm:text-lg font-bold text-center text-white"
+      >
+        服务矩阵
+      </h2>
+      <div
+        class="grid grid-cols-8 sm:grid-cols-2 sm:gap-2 gap-[24px] sm:w-[328px] sm:mx-auto max-w-[1440px] mx-auto md:p-5"
+      >
+        <div v-for="(item, idx) in serveList" :key="idx" :class="item.clx">
+          <picture class="absolute inset-0 z-0">
+            <source media="(max-width: 480px)" :srcset="item.smBg" />
+            <source media="(max-width: 1280px)" :srcset="item.lgBg" />
+            <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
+          </picture>
+          <section class="relative z-10 p-6 sm:p-3 size-full">
+            <h3 class="text-white text-3xl md:text-lg sm:text-xs font-bold">{{ item.title }}</h3>
+            <div
+              class="text-[#A4B0B7] flex flex-col lg:text-lg sm:text-[10px] gap-2 sm:gap-1 mt-9 sm:mt-3"
+            >
+              <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
   </main>
 </template>
 
 <script setup lang="ts">
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+const slides = [
+  {
+    bg: '../assets/images/banner-device.png',
+    title: '储能工业控制主机 BK-2000',
+    subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
+    tags: ['低成本', '高可靠性', '全场景适配'],
+  },
+  // {
+  //   bg: '../assets/images/banner-device.png',
+  //   title: '储能工业控制主机 BK-2000',
+  //   subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
+  //   tags: ['低成本', '高可靠性', '全场景适配'],
+  // },
+]
+
+const serveList = [
+  {
+    title: '丰富的接口',
+    lgBg: '/images/serve/2.1_lg.png',
+    smBg: '/images/serve/2.1_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '完美的中间件生态',
+    lgBg: '/images/serve/2.2_lg.png',
+    smBg: '/images/serve/2.2_sm.png',
+    contentList: ['MQTT', 'OPC UA', 'Modbus', 'OPC UA', 'Modbus', '……'],
+    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '电力四级防护',
+    lgBg: '/images/serve/2.3_lg.png',
+    smBg: '/images/serve/2.3_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '运维系统工具',
+    lgBg: '/images/serve/2.4_lg.png',
+    smBg: '/images/serve/2.4_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'md:aspect-[1/1.0585] md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px] relative',
+  },
+
+  {
+    title: '储能家EMS应用',
+    lgBg: '/images/serve/2.5_lg.png',
+    smBg: '/images/serve/2.5_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'md:aspect-[2.5/1.0158] relative md:col-span-5 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '云端储能平台',
+    lgBg: '/images/serve/2.6_lg.png',
+    smBg: '/images/serve/2.6_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'md:aspect-[1.5/1.0158] relative md:col-span-3 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+]
 </script>
 
-<style scoped></style>
+<style scoped>
+.swiper-banner-info {
+  @apply absolute bottom-0 left-20 right-0 top-1/2 sm:left-1/2 sm:top-25
+          sm:-translate-y-0 sm:-translate-x-[calc(300px/2)] -translate-y-1/2
+          flex flex-col justify-center sm:justify-normal gap-16  md:gap-4 sm:gap-2
+           xl:w-auto sm:w-[300px] text-white;
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d950bb2..6eb80bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       nuxt:
         specifier: ^3.16.1
         version: 3.16.2(@parcel/watcher@2.5.1)(db0@0.3.1)(ioredis@5.6.0)(magicast@0.3.5)(rollup@4.39.0)(terser@5.39.0)(typescript@5.6.3)(vite@6.2.4(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.1))(yaml@2.7.1)
+      nuxt-swiper:
+        specifier: 2.0.0
+        version: 2.0.0(magicast@0.3.5)
       reka-ui:
         specifier: ^2.1.1
         version: 2.2.0(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
@@ -2342,6 +2345,9 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nuxt-swiper@2.0.0:
+    resolution: {integrity: sha512-9NJ7ipoo3sBqFOtnYccVjVPuywGqY1vA82R2YinHo/U4Mw8c0Uy/Q+ep7qihLWr/3wZq9BqFOKPuWKw5xKl77Q==}
+
   nuxt@3.16.2:
     resolution: {integrity: sha512-yjIC/C4HW8Pd+m0ACGliEF0HnimXYGYvUzjOsTiLQKkDDt2T+djyZ+pCl9BfhQBA8rYmnsym2jUI+ubjv1iClw==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0.0}
@@ -3071,6 +3077,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  swiper@11.2.6:
+    resolution: {integrity: sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==}
+    engines: {node: '>= 4.7.0'}
+
   system-architecture@0.1.0:
     resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
     engines: {node: '>=18'}
@@ -6049,6 +6059,13 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  nuxt-swiper@2.0.0(magicast@0.3.5):
+    dependencies:
+      '@nuxt/kit': 3.16.2(magicast@0.3.5)
+      swiper: 11.2.6
+    transitivePeerDependencies:
+      - magicast
+
   nuxt@3.16.2(@parcel/watcher@2.5.1)(db0@0.3.1)(ioredis@5.6.0)(magicast@0.3.5)(rollup@4.39.0)(terser@5.39.0)(typescript@5.6.3)(vite@6.2.4(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.1))(yaml@2.7.1):
     dependencies:
       '@nuxt/cli': 3.24.0(magicast@0.3.5)
@@ -6861,6 +6878,8 @@ snapshots:
       csso: 5.0.5
       picocolors: 1.1.1
 
+  swiper@11.2.6: {}
+
   system-architecture@0.1.0: {}
 
   tailwind-config-viewer@2.0.4(tailwindcss@3.4.17):
diff --git a/public/images/banner/device_lg.png b/public/images/banner/device_lg.png
new file mode 100644
index 0000000..3d8c48b
Binary files /dev/null and b/public/images/banner/device_lg.png differ
diff --git a/public/images/banner/device_sm.png b/public/images/banner/device_sm.png
new file mode 100644
index 0000000..10cd813
Binary files /dev/null and b/public/images/banner/device_sm.png differ
diff --git a/public/images/bg.jpg b/public/images/bg.jpg
new file mode 100644
index 0000000..e649811
Binary files /dev/null and b/public/images/bg.jpg differ
diff --git a/public/images/serve/2.1_lg.png b/public/images/serve/2.1_lg.png
new file mode 100644
index 0000000..4bad8ee
Binary files /dev/null and b/public/images/serve/2.1_lg.png differ
diff --git a/public/images/serve/2.1_sm.png b/public/images/serve/2.1_sm.png
new file mode 100644
index 0000000..326c881
Binary files /dev/null and b/public/images/serve/2.1_sm.png differ
diff --git a/public/images/serve/2.2_lg.png b/public/images/serve/2.2_lg.png
new file mode 100644
index 0000000..1e3f7af
Binary files /dev/null and b/public/images/serve/2.2_lg.png differ
diff --git a/public/images/serve/2.2_sm.png b/public/images/serve/2.2_sm.png
new file mode 100644
index 0000000..b6323e2
Binary files /dev/null and b/public/images/serve/2.2_sm.png differ
diff --git a/public/images/serve/2.3_lg.png b/public/images/serve/2.3_lg.png
new file mode 100644
index 0000000..7238acd
Binary files /dev/null and b/public/images/serve/2.3_lg.png differ
diff --git a/public/images/serve/2.3_sm.png b/public/images/serve/2.3_sm.png
new file mode 100644
index 0000000..51058c5
Binary files /dev/null and b/public/images/serve/2.3_sm.png differ
diff --git a/public/images/serve/2.4_lg.png b/public/images/serve/2.4_lg.png
new file mode 100644
index 0000000..d20b506
Binary files /dev/null and b/public/images/serve/2.4_lg.png differ
diff --git a/public/images/serve/2.4_sm.png b/public/images/serve/2.4_sm.png
new file mode 100644
index 0000000..c244ad3
Binary files /dev/null and b/public/images/serve/2.4_sm.png differ
diff --git a/public/images/serve/2.5_lg.png b/public/images/serve/2.5_lg.png
new file mode 100644
index 0000000..e05a704
Binary files /dev/null and b/public/images/serve/2.5_lg.png differ
diff --git a/public/images/serve/2.5_sm.png b/public/images/serve/2.5_sm.png
new file mode 100644
index 0000000..02c2a64
Binary files /dev/null and b/public/images/serve/2.5_sm.png differ
diff --git a/public/images/serve/2.6_lg.png b/public/images/serve/2.6_lg.png
new file mode 100644
index 0000000..3e50104
Binary files /dev/null and b/public/images/serve/2.6_lg.png differ
diff --git a/public/images/serve/2.6_sm.png b/public/images/serve/2.6_sm.png
new file mode 100644
index 0000000..9efa367
Binary files /dev/null and b/public/images/serve/2.6_sm.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 64f8858..7cfd86f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,13 +16,10 @@ export default {
   theme: {
     extend: {
       screens: {
-        sm: {
-          max: '479px',
-        },
-        md: {
-          min: '480px',
-          max: '760px',
-        },
+        sm: { max: '479px' },
+        md: { min: '480px', max: '1024px' },
+        lg: { min: '1280px' },
+        xl: { min: '1920px' },
       },
       spacing: {
         13: '3.25rem',
@@ -38,6 +35,8 @@ export default {
         14: '3.5rem',
         15: '3.75rem',
         16: '4rem',
+        17: '4.25rem',
+        24: '6rem',
       },
 
       colors: {