fix: minor fixes

Author: mehdibha

content/templates/index.mdx

@@ -5,3 +5,5 @@ description: Ready templates to quick start your project
 
 A collection of open-source React templates curated by rCopy's creator. This list contains React, Next.js, Remix templates. 
 If you think it's missing a template, please [open an issue](https://github.com/mehdibha/rcopy/issues/new).
+
+<DocsList name="templates" />

src/components/docs/docs-list.tsx

@@ -18,26 +18,27 @@ export const DocsList = ({ name, limit, className }: DocsListProps) => {
   const hasMore = limit ? docs.length > limit : false;
 
   return (
-    <div
-      className={cn(
-        "grid grid-cols-4 gap-4",
-        {
-          "grid-cols-3": type === "component" || type === "hook",
-          "grid-cols-4": type === "block" || type === "template",
-        },
-        className
-      )}
-    >
-      {docs.slice(0, limit).map((doc, index) => (
-        <DocCard key={index} doc={doc} />
-      ))}
+    <div>
+      <div
+        className={cn(
+          "grid grid-cols-4 gap-4",
+          {
+            "grid-cols-3": type === "component" || type === "hook",
+            "grid-cols-4": type === "block" || type === "template",
+          },
+          className
+        )}
+      >
+        {docs.slice(0, limit).map((doc, index) => (
+          <DocCard key={index} doc={doc} />
+        ))}
+      </div>
       {hasMore && (
-        <Link
-          href={`/${name}`}
-          className="flex cursor-pointer items-center justify-center rounded-md border border-border/20 bg-card/70 transition-colors duration-150 hover:border-border hover:bg-card"
-        >
-          Explore more
-        </Link>
+        <div className="flex justify-end">
+          <Button size="sm" variant="link" className="mt-4 block">
+            <Link href={`/${name}`}>Explore more</Link>
+          </Button>
+        </div>
       )}
     </div>
   );

src/components/marketing/explore.tsx

@@ -1,5 +1,5 @@
-import { cn } from "@/lib/utils/classes";
-import { DocsList } from "../docs/docs-list";
+import { DocsList } from "@/components/docs/docs-list";
+import { IconsList } from "./icons-list";
 
 export const Explore = ({ className }: { className: string }) => {
   const categories = [
@@ -17,16 +17,19 @@ export const Explore = ({ className }: { className: string }) => {
             <h3 className="category-xl pl-6 font-mono text-xl tracking-widest text-muted-foreground">
               {category.title}
             </h3>
-            <div
-              className={cn(
-                "border-l border-muted pb-8 pl-6 pt-4",
-                index === categories.length - 1
-              )}
-            >
-              <DocsList name={category.slug} limit={3} className="grid-cols-4" />
+            <div className="border-l border-muted pb-8 pl-6 pt-4">
+              <DocsList name={category.slug} limit={4} className="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"}>
+            <IconsList limit={32} />
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/marketing/hero/animation.tsx

@@ -138,7 +138,7 @@ export const Animation = () => {
                   key={i}
                   className="flex h-16 items-center justify-center rounded-md bg-card shadow"
                 >
-                  <Icon size={30} />
+                  <Icon size={22} />
                 </div>
               ))}
             </div>

src/components/marketing/icons-list.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+  AlignCenterIcon,
+  AtSignIcon,
+  BarChart4Icon,
+  BellIcon,
+  BluetoothIcon,
+  BoldIcon,
+  CodeIcon,
+  InboxIcon,
+  LinkIcon,
+  MailIcon,
+  MoonIcon,
+  PhoneIcon,
+  ScreenShareIcon,
+  SmileIcon,
+  SparkleIcon,
+  SunIcon,
+  UserRoundIcon,
+  Volume2Icon,
+  ZapIcon,
+} from "lucide-react";
+
+const icons = [
+  CodeIcon,
+  BellIcon,
+  InboxIcon,
+  MoonIcon,
+  MailIcon,
+  AtSignIcon,
+  LinkIcon,
+  AlignCenterIcon,
+  BoldIcon,
+  UserRoundIcon,
+  BarChart4Icon,
+  BluetoothIcon,
+  ZapIcon,
+  Volume2Icon,
+  SunIcon,
+  MoonIcon,
+  SparkleIcon,
+  SmileIcon,
+  ScreenShareIcon,
+  PhoneIcon,
+];
+
+export const IconsList = ({ limit }: { limit?: number }) => {
+  return (
+    <>
+      {icons.slice(0, limit ?? icons.length).map((Icon, i) => (
+        <div
+          key={i}
+          className="flex h-16 items-center justify-center rounded-md bg-card shadow"
+        >
+          <Icon size={18} />
+        </div>
+      ))}
+    </>
+  );
+};