fix: responsive home page

Author: mehdibha

src/components/marketing/explore.tsx

@@ -1,12 +1,13 @@
+import Link from "next/link";
 import { DocsList } from "@/components/docs/docs-list";
+import { Button } from "@/lib/components/core/default/button";
 import { IconsList } from "./icons-list";
 
 export const Explore = ({ className }: { className: string }) => {
   const categories = [
     { title: "components", slug: "components" },
     { title: "hooks", slug: "hooks" },
     { title: "blocks", slug: "blocks" },
-    { title: "Animations", slug: "components/animations" },
   ];
   return (
     <div className={className}>
@@ -18,17 +19,30 @@ export const Explore = ({ className }: { className: string }) => {
               {category.title}
             </h3>
             <div className="border-l border-muted pb-8 pl-6 pt-4">
-              <DocsList name={category.slug} limit={4} className="grid-cols-4" />
+              <DocsList
+                name={category.slug}
+                limit={4}
+                className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+              />
             </div>
           </div>
         ))}
         <div>
           <h3 className="category-xl pl-6 font-mono text-xl tracking-widest text-muted-foreground">
             Icons
           </h3>
-          <div className={"grid grid-cols-16 gap-2 border-l border-muted pb-1 pl-6 pt-4"}>
+          <div
+            className={
+              "grid grid-cols-4 gap-2 border-l border-muted pb-1 pl-6 pt-4 sm:grid-cols-8 lg:grid-cols-16"
+            }
+          >
             <IconsList limit={32} />
           </div>
+          <div className="flex justify-end">
+            <Button size="sm" variant="link" className="mt-4 block">
+              <Link href="/icons">Explore more</Link>
+            </Button>
+          </div>
         </div>
       </div>
     </div>

src/components/marketing/icons-list.tsx

@@ -6,16 +6,27 @@ import {
   BellIcon,
   BluetoothIcon,
   BoldIcon,
+  BoxIcon,
+  BriefcaseIcon,
+  CheckIcon,
   CodeIcon,
+  HandIcon,
   InboxIcon,
+  Layers3Icon,
   LinkIcon,
+  ListIcon,
+  LockIcon,
   MailIcon,
+  MessageCircleIcon,
   MoonIcon,
   PhoneIcon,
   ScreenShareIcon,
+  SearchIcon,
   SmileIcon,
   SparkleIcon,
+  StretchVerticalIcon,
   SunIcon,
+  ThumbsUpIcon,
   UserRoundIcon,
   Volume2Icon,
   ZapIcon,
@@ -25,7 +36,6 @@ const icons = [
   CodeIcon,
   BellIcon,
   InboxIcon,
-  MoonIcon,
   MailIcon,
   AtSignIcon,
   LinkIcon,
@@ -42,6 +52,19 @@ const icons = [
   SmileIcon,
   ScreenShareIcon,
   PhoneIcon,
+  HandIcon,
+  Layers3Icon,
+  InboxIcon,
+  ListIcon,
+  LockIcon,
+  MessageCircleIcon,
+  SearchIcon,
+  StretchVerticalIcon,
+  ThumbsUpIcon,
+  AtSignIcon,
+  BoxIcon,
+  BriefcaseIcon,
+  CheckIcon,
 ];
 
 export const IconsList = ({ limit }: { limit?: number }) => {
@@ -52,7 +75,7 @@ export const IconsList = ({ limit }: { limit?: number }) => {
           key={i}
           className="flex h-16 items-center justify-center rounded-md bg-card shadow"
         >
-          <Icon size={18} />
+          <Icon size={20} />
         </div>
       ))}
     </>