From db103e256490e9b1987421137a528578437b6dca Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Sat, 23 Nov 2024 15:49:43 +0700
Subject: [PATCH] lfg

---
 components/cta.tsx       |  2 +-
 components/resources.tsx | 81 ++++++++++++++++++++++++++++++++++++++--
 components/ui/menu.tsx   |  4 +-
 3 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/components/cta.tsx b/components/cta.tsx
index 26f25753..7cb44ddc 100644
--- a/components/cta.tsx
+++ b/components/cta.tsx
@@ -20,7 +20,7 @@ export function Cta() {
           <Link
             target="_blank"
             href={siteConfig.repo}
-            className={buttonStyles({ size: "large", intent: "secondary" })}
+            className={buttonStyles({ size: "large", appearance: "outline" })}
           >
             <IconBrandGithub />
             GitHub
diff --git a/components/resources.tsx b/components/resources.tsx
index c868d593..d39ff26c 100644
--- a/components/resources.tsx
+++ b/components/resources.tsx
@@ -5,7 +5,9 @@ import {
   IconBrandJustd,
   IconBrandLaravel,
   IconBrandNextjs,
-  IconBrandRemix
+  IconBrandRemix,
+  IconHeartFill,
+  IconWindowVisitFill
 } from "justd-icons"
 import { Badge, Card, Grid, Heading, Link } from "ui"
 
@@ -88,7 +90,8 @@ export function Resources() {
           </Grid.Collection>
         </Grid>
       </section>
-      <section id="icons" className="mb-12">
+
+      <section id="library" className="mb-12">
         <Heading level={2} className="mb-6">
           Icons
         </Heading>
@@ -98,10 +101,10 @@ export function Resources() {
             sm: 2
           }}
           gap={2}
-          aria-label="Icons"
+          aria-label="Support"
         >
           <Grid.Item
-            aria-label="Paranoid icons"
+            aria-label="Justd icons"
             id="justd-icons"
             className="relative focus:outline-none p-4 lg:p-6 h-full flex flex-col w-full focus-visible:outline-none focus-visible:outline-primary rounded-xl bg-tertiary shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)] dark:before:pointer-events-none dark:before:absolute dark:before:-inset-px dark:before:rounded-xl dark:before:shadow-[0px_2px_8px_0px_rgba(0,_0,_0,_0.20),_0px_1px_0px_0px_rgba(255,_255,_255,_0.06)_inset] forced-colors:outline"
           >
@@ -129,6 +132,76 @@ export function Resources() {
           </Grid.Item>
         </Grid>
       </section>
+      <section id="support" className="mb-12">
+        <Heading level={2} className="mb-6">
+          Support
+        </Heading>
+        <Grid
+          columns={{
+            initial: 1,
+            sm: 2
+          }}
+          gap={2}
+          aria-label="Support"
+        >
+          <Grid.Item
+            aria-label="Support"
+            id="support"
+            className="relative focus:outline-none p-4 lg:p-6 h-full flex flex-col w-full focus-visible:outline-none focus-visible:outline-primary rounded-xl bg-tertiary shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)] dark:before:pointer-events-none dark:before:absolute dark:before:-inset-px dark:before:rounded-xl dark:before:shadow-[0px_2px_8px_0px_rgba(0,_0,_0,_0.20),_0px_1px_0px_0px_rgba(255,_255,_255,_0.06)_inset] forced-colors:outline"
+          >
+            <Link
+              target="_blank"
+              aria-label={`Justd icons`}
+              rel="noopener noreferrer"
+              href="https://github.com/sponsors/irsyadadl"
+              className="absolute inset-0 size-full"
+            />
+            <div className="flex-1">
+              <div className="px-6 pt-6">
+                <IconHeartFill className="size-7 text-pink-500" />
+              </div>
+              <Card.Header>
+                <Card.Title level={3}>Support This Project</Card.Title>
+                <Card.Description className="line-clamp-2">
+                  Join us in building something impactful. Your contributions, whether sharing,
+                  coding, or spreading the word, help us grow and make a difference.
+                </Card.Description>
+              </Card.Header>
+            </div>
+            <Card.Footer>
+              <Badge>support</Badge>
+            </Card.Footer>
+          </Grid.Item>
+          <Grid.Item
+            aria-label="Templates"
+            id="templates"
+            className="relative focus:outline-none p-4 lg:p-6 h-full flex flex-col w-full focus-visible:outline-none focus-visible:outline-primary rounded-xl bg-tertiary shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)] dark:before:pointer-events-none dark:before:absolute dark:before:-inset-px dark:before:rounded-xl dark:before:shadow-[0px_2px_8px_0px_rgba(0,_0,_0,_0.20),_0px_1px_0px_0px_rgba(255,_255,_255,_0.06)_inset] forced-colors:outline"
+          >
+            <Link
+              target="_blank"
+              aria-label={`Justd icons`}
+              rel="noopener noreferrer"
+              href="https://irsyad.co/templates"
+              className="absolute inset-0 size-full"
+            />
+            <div className="flex-1">
+              <div className="px-6 pt-6">
+                <IconWindowVisitFill className="size-7" />
+              </div>
+              <Card.Header>
+                <Card.Title level={3}>Templates</Card.Title>
+                <Card.Description className="line-clamp-2">
+                  Looking for beautifully crafted templates to elevate your project? Browse through
+                  a collection of designs tailored to meet your needs.
+                </Card.Description>
+              </Card.Header>
+            </div>
+            <Card.Footer>
+              <Badge>support</Badge>
+            </Card.Footer>
+          </Grid.Item>
+        </Grid>
+      </section>
     </>
   )
 }
diff --git a/components/ui/menu.tsx b/components/ui/menu.tsx
index 65db728f..9f48e73d 100644
--- a/components/ui/menu.tsx
+++ b/components/ui/menu.tsx
@@ -150,7 +150,7 @@ const MenuHeader = ({ className, separator = false, ...props }: MenuHeaderProps)
   <Header
     className={cn(
       "p-2 text-base font-semibold sm:text-sm",
-      separator && "-mx-1 border-b border-b-border px-3 pb-[0.625rem]",
+      separator && "-mx-1 border-b px-3 pb-[0.625rem]",
       className
     )}
     {...props}
@@ -158,7 +158,7 @@ const MenuHeader = ({ className, separator = false, ...props }: MenuHeaderProps)
 )
 
 const MenuSeparator = ({ className, ...props }: SeparatorProps) => (
-  <Separator className={cn("-mx-1 my-1 h-px border-b border-b-muted", className)} {...props} />
+  <Separator className={cn("-mx-1 my-1 h-px border-b", className)} {...props} />
 )
 
 const Checkbox = ({ className, children, ...props }: MenuItemProps) => (