Tweak homepage design

Author: Dan Costello

app/(home)/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
+import { LockIcon, ShieldIcon, UsersIcon } from "lucide-react";
 
 export default function HomePage() {
   return (
@@ -30,46 +31,29 @@ export default function HomePage() {
         </Link>
         <Link
           href="https://github.com/userclouds/userclouds-oss"
-          className="inline-flex items-center justify-center rounded-lg border border-fd-border bg-background px-6 py-3 text-sm font-medium hover:bg-fd-muted/50 transition-colors"
+          className="inline-flex items-center justify-center rounded-lg border border-fd-border bg-background px-6 py-3 text-sm font-medium hover:bg-fd-primary/20 transition-colors"
           target="_blank"
           rel="noopener noreferrer"
         >
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="18"
-            height="18"
+            role="img"
             viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            className="mr-2 size-6"
           >
-            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-            <path d="M9 18c-4.51 2-5-2-7-2" />
+            <title>GitHub</title>
+            <path
+              className="dark:fill-white"
+              d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+            />
           </svg>
           GitHub
         </Link>
       </div>
 
       <div className="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl">
         <div className="flex flex-col items-center p-6 bg-fd-card rounded-lg border border-fd-border">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mb-4 text-fd-primary"
-          >
-            <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
-            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-          </svg>
+          <LockIcon className="mb-2 size-5" />
           <h3 className="text-lg font-semibold mb-2">Authentication</h3>
           <p className="text-fd-muted-foreground text-center">
             Secure, flexible user authentication system with multiple identity
@@ -78,44 +62,15 @@ export default function HomePage() {
         </div>
 
         <div className="flex flex-col items-center p-6 bg-fd-card rounded-lg border border-fd-border">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mb-4 text-fd-primary"
-          >
-            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
-          </svg>
+          <ShieldIcon className="mb-2 size-6" />
           <h3 className="text-lg font-semibold mb-2">Authorization</h3>
           <p className="text-fd-muted-foreground text-center">
             Fine-grained access control with easy-to-implement permission models
           </p>
         </div>
 
         <div className="flex flex-col items-center p-6 bg-fd-card rounded-lg border border-fd-border">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mb-4 text-fd-primary"
-          >
-            <path d="M21 5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2" />
-            <path d="M16 2v4" />
-            <path d="M8 2v4" />
-            <path d="M2 10h20" />
-          </svg>
+          <UsersIcon className="mb-2 size-6" />
           <h3 className="text-lg font-semibold mb-2">User Data Management</h3>
           <p className="text-fd-muted-foreground text-center">
             Centralized user data storage with privacy-preserving tokenization

app/global.css

@@ -38,7 +38,7 @@
   --color-fd-popover-foreground: hsl(220, 60%, 94%);
   --color-fd-card: hsla(220, 56%, 15%, 0.4);
   --color-fd-card-foreground: hsl(220, 60%, 94%);
-  --color-fd-border: hsla(220, 50%, 50%, 0.2);
+  --color-fd-border: hsla(220, 50%, 50%, 0.5);
   --color-fd-primary: hsl(203, 100%, 50%);
   --color-fd-primary-foreground: hsl(0, 0%, 20%);
   --color-fd-secondary: hsl(220, 50%, 20%);