About page

src/components/ColorPicker.jsx

@@ -1,13 +1,13 @@
 import "../css/components/ColorPicker.css";
 
-function ColorPicker({ onColorChange }) {
+function ColorPicker({ onColorChange, text }) {
   const handleColorClick = (color) => {
     onColorChange(color);
   };
 
   return (
     <div>
-      <h4>Color</h4>
+      <h4>{text}</h4>
       <div className="ColorPicker">
         <div className="ColorPicker__option" style={{ backgroundColor: '#00D03B' }} onClick={() => handleColorClick('#00D03B')}></div>
         <div className="ColorPicker__option" style={{ backgroundColor: '#FF4141' }} onClick={() => handleColorClick('#FF4141')}></div>

src/components/FontDemo.jsx

@@ -51,7 +51,7 @@ function FontDemo(props) {
           onChange={setKerning}
           step={1}
         />
-        <ColorPicker onColorChange={handleColorChange} />
+        <ColorPicker onColorChange={handleColorChange} text={"Color"} />
         <br />
         {props.showDownload && <a className="button corner-button" href={`/fonts/${props.link}`}>Download ➬</a>}
       </div>

src/css/elements/button.css

@@ -23,6 +23,8 @@
 
 .button:hover {
     background-color: var(--button-hover);
+    border-bottom-left-radius: 15px;
+    border-color: transparent;
 }
 
 

src/css/index.css

@@ -59,6 +59,10 @@ a,u {
 	font-style: italic;
 }
 
+p {
+	font-size: 1.1rem;
+}
+
 .logo {
 	margin: 0;
 	text-transform: uppercase;
@@ -75,6 +79,16 @@ a,u {
 	flex-basis: 50%; 
 }
 
+.main {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	max-width: 900px;
+	margin: auto;
+	margin-top: 2rem;
+}
+
+
 /* Misc Pages CSS  */
 
 .Detail {
@@ -84,13 +98,6 @@ a,u {
 	padding: 1rem;
 }
 
-.FourOhFour__main {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin-top: 2rem;
-}
-
 
 .FourOhFour__emoji {
 	font-size: 18rem;
@@ -109,4 +116,3 @@ a,u {
 	  transform: rotate(360deg);
 	}
   }
-

src/main.jsx

@@ -5,6 +5,7 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import Home from './pages/Home.jsx'
+import About from './pages/About.jsx'
 import Footer from './layouts/Footer.jsx'
 import Header from './layouts/Header.jsx'
 import FontDetail from './pages/Detail.jsx'
@@ -16,6 +17,10 @@ const router = createBrowserRouter([
     path: "/",
     element: <Home />,
   },
+  {
+    path: "/about",
+    element: <About />,
+  },
   {
     path: "fonts/:id",
     element: <FontDetail />,

src/pages/404.jsx

@@ -1,7 +1,7 @@
 function FourOhFour() {
 	return (
 		<article>
-			<div className="FourOhFour__main">
+			<div className="main">
 				<h1>404</h1>
 				<p>It seems like the page you’re looking for doesn’t exist.</p>
 				<a href="/" className="button">Head Home</a>

src/pages/About.jsx

@@ -0,0 +1,26 @@
+import ColorPicker from '../components/ColorPicker.jsx';
+import { useState } from 'react';
+
+
+
+function About() {
+  const [textColor, setTextColor] = useState('#000000');
+
+  const handleColorChange = (color) => {
+    setTextColor(color);
+  };
+
+  return (
+    <div className="main About">
+      <ColorPicker onColorChange={handleColorChange} />
+      <h1   
+      style={{
+          color: textColor,
+        }}>About</h1>
+      <p>Mother Type is an open source type foundry.</p>
+    </div>
+
+  );
+}
+
+export default About;

src/pages/Detail.jsx

@@ -63,7 +63,7 @@ function Font({ fontData }) {
 		writing_systems = "N/A",
 		license = "N/A",
 		published = "N/A",
-		project_url,
+		repository_url,
 	} = typeface_family || {};
 
 	return (
@@ -81,7 +81,7 @@ function Font({ fontData }) {
 					<a className="button" href={`https://github.com/mother-type/${name}/raw/main/fonts/${name}.zip`} download>
 						<u>Download Specimen ➬</u>
 					</a>
-					<a className={project_url ? "button" : "hidden"} href={project_url || "#"}>
+					<a className={repository_url ? "button" : "hidden"} href={repository_url || "#"}>
 						<u>Source Files</u>
 					</a>
 				</div>