From 78afc6ae562d030f998720bc0d61b15b0a82d022 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Tue, 27 Aug 2024 18:50:10 +0200
Subject: [PATCH] Add codehike link

---
 web/app/page.tsx | 48 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/web/app/page.tsx b/web/app/page.tsx
index 5e51e07..3dbc94c 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -16,49 +16,39 @@ export default async function Page() {
     <main>
       <div style={{ height: "5rem" }} />
       <Title />
-
       <div style={{ height: "4rem" }} />
       <CodeDemo />
-
       <div style={{ height: "3rem" }} />
       <Details />
-
+      <div style={{ height: "3rem" }} />
+      <CodeHike />
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Title</h2>
       <TitleDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Line Numbers</h2>
       <LineNumbersDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Global Props</h2>
       <GlobalPropsDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Theme</h2>
       <ThemeDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Dark Mode</h2>
       <DarkModeDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Custom Theme</h2>
       <CustomThemeDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Markdown / MDX</h2>
       <MarkdownDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Titles in Markdown</h2>
       <TitlesInMarkdownDemo />
-
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Customization</h2>
       <ExtensionsDemo />
-
       <div style={{ height: "50vh" }} />
     </main>
   )
@@ -84,6 +74,40 @@ function Title() {
   )
 }
 
+function CodeHike() {
+  return (
+    <a href="https://codehike.org" target="_blank" rel="noreferrer noopener">
+      <WithBackground
+        fg={{ color: "#ccc" }}
+        bg={{ color: "#fb7fec99" }}
+        blur={20}
+        style={{
+          fontSize: "1.45em",
+          fontWeight: "600",
+          lineHeight: "1.5em",
+          width: "100%",
+          margin: "0 auto",
+          border: "1px solid #fb7fec88",
+          padding: "1rem",
+          borderRadius: "0.5rem",
+          textAlign: "center",
+        }}
+      >
+        If you want to build{" "}
+        <span style={{ color: "rgb(255, 203, 107)" }}>
+          rich content websites
+        </span>{" "}
+        <br />
+        with more than just syntax highlighting:
+        <br />
+        <span style={{ color: "#fb7fec" }}>
+          try <span style={{ textDecoration: "underline" }}>Code Hike</span>
+        </span>
+      </WithBackground>
+    </a>
+  )
+}
+
 function Details() {
   return (
     <WithBackground fg={{ color: "#ccc" }} bg={{ color: "#ccc2" }} blur={20}>