Merge pull request #44 from TheSoftwareDevGuild/improve-front-end-18-09-25

Improve front end 18 09 25

Author: oscarwroche

frontend/.astro/settings.json

@@ -1,12 +1,12 @@
 {
-  "_variables": {
-    "lastUpdateCheck": 1756999065417
-  },
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "astro",
-    "typescript",
-    "typescriptreact"
-  ]
-}
+	"_variables": {
+		"lastUpdateCheck": 1758201525305
+	},
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact",
+		"astro",
+		"typescript",
+		"typescriptreact"
+	]
+}

frontend/.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

frontend/src/components/AppSidebar.tsx

@@ -1,4 +1,4 @@
-import { Smile, BadgeCheck } from "lucide-react";
+import { Smile, BadgeCheck, Home } from "lucide-react";
 
 import {
   Sidebar,
@@ -13,6 +13,11 @@ import {
 
 // Menu items.
 const items = [
+  {
+    title: "Home",
+    url: "/",
+    icon: Home,
+  },
   {
     title: "Profiles",
     url: "/profiles",

frontend/src/components/pages/HomePage.tsx

@@ -0,0 +1,67 @@
+export default function HomePage() {
+  return (
+    <div className="mx-auto w-full max-w-4xl p-6 space-y-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold tracking-tight">The Guild Genesis</h1>
+        <a
+          href="https://discord.gg/pg4UgaTr"
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          Join our Discord
+        </a>
+      </div>
+
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">What is The Guild?</h2>
+        <p className="text-muted-foreground">
+          The Guild is a peer‑run organization for software developers. We learn
+          together, certify each other’s skills, and create opportunities
+          through collaboration, attestations, and on‑chain credentials.
+        </p>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">Why it matters</h2>
+        <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
+          <li>
+            Community‑verified skills: members issue attestations that build
+            portable, credible profiles.
+          </li>
+          <li>
+            Learning by doing: contribute, earn badges, and grow through real
+            projects.
+          </li>
+          <li>
+            Open and merit‑based: progress is transparent and anchored on public
+            infrastructure.
+          </li>
+        </ul>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">How it works</h2>
+        <ol className="list-decimal pl-6 space-y-2 text-muted-foreground">
+          <li>Connect your wallet and create your developer profile.</li>
+          <li>
+            Contribute to initiatives and receive attestations from peers.
+          </li>
+          <li>Earn badges that reflect concrete skills and achievements.</li>
+          <li>
+            Use your on‑chain reputation across The Guild apps and beyond.
+          </li>
+        </ol>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">Get involved</h2>
+        <p className="text-muted-foreground">
+          New here? Start by joining the Discord, introducing yourself, and
+          picking a project that matches your interests. Your first contribution
+          can earn your first attestation.
+        </p>
+      </section>
+    </div>
+  );
+}

frontend/src/components/profiles/list/ProfilesList.tsx

@@ -83,7 +83,11 @@ export function ProfilesList() {
         <p className="text-sm text-gray-600">Loading profiles...</p>
       ) : null}
       {error || attestations.error ? (
-        <p className="text-sm text-red-600">{(error as Error).message}</p>
+        <p className="text-sm text-red-600">
+          {(error as any)?.message ??
+            (attestations.error as any)?.message ??
+            "An error occurred"}
+        </p>
       ) : null}
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

frontend/src/lib/wagmi.ts

@@ -1,12 +1,5 @@
 import { getDefaultConfig } from "@rainbow-me/rainbowkit";
-import {
-  mainnet,
-  sepolia,
-  arbitrum,
-  arbitrumSepolia,
-  polygon,
-  polygonAmoy,
-} from "wagmi/chains";
+import { polygonAmoy } from "wagmi/chains";
 
 const projectId = import.meta.env.PUBLIC_WALLET_CONNECT_PROJECT_ID as
   | string
@@ -15,6 +8,6 @@ console.log(projectId);
 export const config = getDefaultConfig({
   appName: "The Guild Genesis",
   projectId: projectId ?? "",
-  chains: [mainnet, sepolia, arbitrum, arbitrumSepolia, polygon, polygonAmoy],
+  chains: [polygonAmoy],
   ssr: false,
 });

frontend/src/pages/index.astro

@@ -1,15 +1,13 @@
 ---
 import { AppWrapper } from '@/components/AppWrapper';
 import Layout from '../layouts/Layout.astro';
+import HomePage from '@/components/pages/HomePage';
 ---
 
 <Layout title="The Guild Genesis">
   <div class="min-h-screen bg-gray-50">
     <AppWrapper client:only="react">
-      <section class="mx-auto max-w-5xl px-4 py-10">
-        <h1 class="mb-6 text-3xl font-bold tracking-tight text-gray-900">The Guild Genesis</h1>
-        <p class="mb-8 max-w-2xl text-gray-600">The Guild Genesis is a peer-run organization for software developers.</p>
-      </section>
+      <HomePage/>
     </AppWrapper>
   </div>
 </Layout>