fix: rework main page to use Chakra, and a little bit of the browse page (#402)

www/app/styles/theme.ts

@@ -1,12 +1,16 @@
-// 1. Import `extendTheme`
 import { extendTheme } from "@chakra-ui/react";
-
+import { Poppins } from "next/font/google";
 import { accordionAnatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(accordionAnatomy.keys);
 
+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["200", "400", "600"],
+  display: "swap",
+});
 const custom = definePartsStyle({
   container: {
     border: "0",
@@ -29,6 +33,14 @@ const accordionTheme = defineMultiStyleConfig({
   variants: { custom },
 });
 
+const linkTheme = defineStyle({
+  baseStyle: {
+    _hover: {
+      color: "blue.500",
+      textDecoration: "none",
+    },
+  },
+});
 export const colors = {
   blue: {
     primary: "#3158E2",
@@ -60,6 +72,11 @@ const theme = extendTheme({
   colors,
   components: {
     Accordion: accordionTheme,
+    Link: linkTheme,
+  },
+  fonts: {
+    body: poppins.style.fontFamily,
+    heading: poppins.style.fontFamily,
   },
 });