feat(sponsor): update sponsor page and buttons

apps/www/app/(home)/sponsors/data.ts

@@ -0,0 +1,7 @@
+export const Individual = [
+  {
+    name: "rds_agi - rudrodip",
+    url: "https://github.com/rudrodip",
+    avatar: "https://github.com/rudrodip.png",
+  },
+];

apps/www/app/(home)/sponsors/page.tsx

@@ -2,6 +2,8 @@ import SponserBanner from "@/components/sponserBanner";
 import Link from "next/link";
 import React from "react";
 
+import { Individual } from "./data";
+
 const SponsorsPage = () => {
   return (
     <div className="flex flex-col justify-center items-center py-4">
@@ -35,8 +37,25 @@ const SponsorsPage = () => {
         <p className="leading-7 [&:not(:first-child)]:mt-6 text-xs text-muted-foreground">
           Individual Sponsors
         </p>
-        <div className="my-1 text-xs flex items-center">
-          no organization sponsors yet :( <Be />
+        <div className="my-1 text-xs flex items-center mt-3">
+          {Individual.map((sponsor, i) => (
+            <a
+              key={sponsor.name}
+              href={sponsor.url}
+              rel="noreferrer noopener"
+              target="_blank"
+              className="inline-flex items-center gap-2 rounded-xl p-3 text-xs transition-colors hover:bg-primary/10"
+            >
+              <img
+                alt="avatar"
+                src={sponsor.avatar}
+                width="30"
+                height="30"
+                className="rounded-lg"
+              />
+              {sponsor.name}
+            </a>
+          ))}
         </div>
       </div>
     </div>

apps/www/app/page.tsx

@@ -22,6 +22,8 @@ import Link from "next/link";
 import { Footer } from "@/components/footer";
 import ContributorCounter from "@/components/contributor-count";
 import Image from "next/image";
+import StarButtonClient from "@/components/StarButtonClient";
+import StarButton from "@/components/starButton";
 
 const CodeBlockServer = dynamic(
   () => import("@/components/ui/code-block-server"),
@@ -381,6 +383,30 @@ export default function App() {
                 Ruru UI is 100% powered by passion and open source community.
               </p>
 
+              <div className="mb-8 flex flex-row items-center gap-2 mt-3">
+                <Link
+                  href="/sponsors"
+                  className={cn(
+                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                    "border bg-gradient-to-t from-primary/10 shadow-inner shadow-primary/10 hover:bg-accent/50 hover:text-accent-foreground",
+                    "h-10 px-4 py-2",
+                  )}
+                >
+                  Sponsors
+                </Link>
+                <a
+                  href="https://github.com/ruru-m07/ruru-ui/contributors"
+                  rel="noreferrer noopener"
+                  className={cn(
+                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    "h-10 px-4 py-2",
+                  )}
+                >
+                  Contributors
+                </a>
+              </div>
+
               <ContributorCounter repoOwner={"ruru-m07"} repoName={"ruru-ui"} />
 
               <p className="text-sm text-muted-foreground my-3">
@@ -466,25 +492,17 @@ export default function App() {
               <div className="text-2xl font-bold text-muted-foreground h-full flex items-center justify-center p-4 space-x-4">
                 <Link
                   className={cn(
-                    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-                    "bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md",
-                    "h-9 px-4 py-2",
+                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                    "bg-background bg-gradient-to-b from-primary to-primary/60 text-primary-foreground shadow-inner shadow-background/20 hover:bg-primary/90",
+                    "h-10 px-4 py-2",
                   )}
                   href={"/docs"}
                 >
                   Read Docs
                 </Link>
-                <Link
-                  className={cn(
-                    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-                    "border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]",
-                    "h-9 px-4 py-2",
-                  )}
-                  href={"https://github.com/ruru-m07/ruru-ui"}
-                  target="_blank"
-                >
-                  <GitHubLogoIcon className="mr-2" /> Give a star
-                </Link>
+                <StarButtonClient>
+                  <StarButton />
+                </StarButtonClient>
               </div>
             </div>
           </div>

apps/www/components/StarButtonClient.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useCallback } from "react";
+
+export default function StarButtonClient({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const handleClick = useCallback(() => {
+    window.open("https://github.com/ruru-m07/ruru-ui", "_blank");
+  }, []);
+
+  return <div onClick={handleClick}>{children}</div>;
+}

apps/www/components/hero.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import React from "react";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
-import { Button, buttonVariants } from "ruru-ui/components/button";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { cn } from "@/utils/utils";
+import StarButton from "./starButton";
+import StarButtonClient from "./StarButtonClient";
 
 const Hero = () => {
   const router = useRouter();
@@ -121,15 +121,19 @@ const Hero = () => {
           beautiful, and highly customizable user interfaces.
         </p>
         <div className="flex space-x-3 mt-2">
-          <Button onClick={() => router.push("/docs")}>Get Started</Button>
-          <Button
-            onClick={() =>
-              window.open("https://github.com/ruru-m07/ruru-ui", "_blank")
-            }
-            variant={"secondary"}
+          <button
+            onClick={() => router.push("/docs")}
+            className={cn(
+              "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+              "bg-background bg-gradient-to-b from-primary to-primary/60 text-primary-foreground shadow-inner shadow-background/20 hover:bg-primary/90",
+              "h-10 px-4 py-2",
+            )}
           >
-            <GitHubLogoIcon className="mr-2" /> Give a star
-          </Button>
+            Get Started
+          </button>
+          <StarButtonClient>
+            <StarButton />
+          </StarButtonClient>
         </div>
         <div className="fixed h-[50px] border rounded-full mt-10 flex justify-around items-center px-2  top-0 backdrop-blur-xl bg-primary-foreground/35">
           {["docs", "blocks", "theme", "sponsors"].map((i) => (

apps/www/components/starButton.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/utils/utils";
+import { Star } from "lucide-react";
+import React from "react";
+
+const stargazers_count = async (): Promise<number> => {
+  return fetch("https://api.github.com/repos/ruru-m07/ruru-ui")
+    .then((response) => response.json())
+    .then((data) => {
+      return data.stargazers_count;
+    });
+};
+
+const StarButton = async () => {
+  let stargazersCount: number = await stargazers_count();
+
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "border bg-gradient-to-t from-primary/10 shadow-inner shadow-primary/10 hover:bg-accent/50 hover:text-accent-foreground",
+        "h-10 px-4 py-2",
+      )}
+    >
+      <Star
+        className="-ms-1 me-2 opacity-60"
+        size={16}
+        strokeWidth={2}
+        aria-hidden="true"
+      />
+      <span className="flex items-baseline gap-2">
+        Star
+        <span className="text-xs text-primary/60">{stargazersCount}</span>
+      </span>
+    </button>
+  );
+};
+
+export default StarButton;