feat: implement YMM filters

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/page.tsx

@@ -1,4 +1,5 @@
 import { Carousel } from 'components/carousel';
+import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
 import { Suspense } from 'react';
@@ -15,6 +16,11 @@ export const metadata = {
 export default async function HomePage() {
   return (
     <>
+      <section className="mx-auto max-w-screen-2xl px-4 pb-4">
+        <Suspense fallback={<YMMFiltersPlaceholder />}>
+          <YMMFilters />
+        </Suspense>
+      </section>
       <ThreeItemGrid />
       <Suspense>
         <Carousel />