feat: static pages are up

src/app/(info)/about/page.tsx

@@ -0,0 +1,64 @@
+import { ArrowIcon } from "@/components/ArrowIcon"
+import * as GraphicSection from "@/components/GraphicSection"
+
+export default function Page() {
+  return (
+    <span className="px-8 block text-gray-400 space-y-5">
+      <h1 className="text-primary text-3xl leading-9">
+        An evolved, user-owned web where you have access to the world in a way
+        only you control.
+      </h1>
+      <p className="text-white mt-3 leading-7">
+        Web3 is about what you want to do, post, read, play, chat, or interact
+        without others saying otherwise. It is about freedom of speech and
+        freedom of economy.
+      </p>
+      <p>
+        First defined by Gavin Wood when the Ethereum network was starting out.
+        He defined it as a &quot;decentralized online ecosystem based on
+        blockchain&quot;.
+      </p>
+
+      <p>
+        However, we view it as much more than that, and definitely more than
+        access to DeFi. We see a ton of more potential to what Web3 as an ideal
+        can evolve to, and are setting out to make it a reality.
+      </p>
+
+      <p>
+        To those that see Web3 as DeFi, we ask this: Do you go on your web
+        browser to access TradingView or other market tools as your homepage, or
+        do you go check your social media, email, and news sites, as well as
+        your money? Blockchain itself is more than just money, and so is Web3,
+        and by extension P2P networks.
+      </p>
+
+      <p>So help us in our goals to level-up Web3.</p>
+      <GraphicSection.Root
+        href="https://lumeweb.com"
+        className="h-[300px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110"
+      >
+        <GraphicSection.Background>
+          <img
+            src="/lume-logo-bg.png"
+            className="background opacity-50 transition-transform duration-500 transform-gpu absolute -top-[100px] -left-10"
+            alt=""
+            aria-hidden
+          />
+        </GraphicSection.Background>
+        <GraphicSection.Foreground>
+          <div className="flex flex-col items-start justify-center h-full w-[500px] float-right mr-20">
+            <p className="text-white text-2xl">
+              WEB3.NEWS is a project by <span className="underline">Lume</span>.
+              Let’s build an open, user-owned web together.
+            </p>
+            <div className="link mt-2 flex text-gray-400">
+              <span>Learn more about Lume and join our community</span>
+              <ArrowIcon className=" ml-2 mt-2" />
+            </div>
+          </div>
+        </GraphicSection.Foreground>
+      </GraphicSection.Root>
+    </span>
+  )
+}

src/app/(info)/donate/page.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+
+export default function Page() {
+  return (
+    <span className="px-8 block text-gray-400 space-y-5">
+      <h1 className="text-primary text-3xl leading-9">
+        You believe the internet should be free and open for everyone,
+        regardless of political beliefs.
+      </h1>
+      <p className="text-white mt-3 leading-7">
+        Please understand that, according to United States regulations for our
+        present incorporation status, donations are not currently
+        tax-deductible.
+      </p>
+      <p>
+        If you are a corporation or business, planning to make a large donation,
+        we recommend that you consult a CPA to ensure you understand the tax
+        implications of your donated funds first.
+      </p>
+
+      <p>
+        All payments are nondeductible donations (unless you get consulted
+        otherwise) and do not create any implied service contract or obligation
+        for Hammer Technologies LLC to render any services.
+      </p>
+
+      <p>
+        To those that see Web3 as DeFi, we ask this: Do you go on your web
+        browser to access TradingView or other market tools as your homepage, or
+        do you go check your social media, email, and news sites, as well as
+        your money? Blockchain itself is more than just money, and so is Web3,
+        and by extension P2P networks.
+      </p>
+
+      <p>So help us in our goals to level-up Web3.</p>
+
+      <Link href="https://gitcoin.com">
+        <button
+          className={`my-6 p-8 text-gray-500 bg-gray-800 hover:bg-gray-800/70`}
+        >
+          Donate via Gitcoin during funding rounds
+        </button>
+      </Link>
+    </span>
+  )
+}

src/app/(info)/layout.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { ArrowLeftIcon } from "@radix-ui/react-icons"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+const TEXT_DICT = {
+    "/about": {
+        headline: "Sharing community news on the open, user-owned web you deserve.",
+        tagline: "Learn about our community"
+    },
+    "/donate": {
+        headline: "We think people should have free access to information no matter how they choose to access it.",
+        tagline: "Help us break the pattern"
+    }
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname();
+    const text = TEXT_DICT[pathname! as '/about' | '/donate']
+  return (
+    <section className="w-full">
+      <header className="text-white mt-10 pb-3 border-b-2 border-primary">
+        <h2>{text.headline}</h2>
+      </header>
+      <Link href="/">
+        <button className="my-4 -ml-3 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
+          <ArrowLeftIcon className="w-4 h-4 inline mr-2 -mt-1" />
+          Back to Home
+        </button>
+      </Link>
+      <div className="flex flex-row mt-6">
+        <aside className="w-1/3">
+          <h3 className="text-white mb-5">{text.tagline}</h3>
+          <nav className="sticky top-3">
+            <ol>
+              <AsideItem href="/about" title="About Web3News" />
+              <AsideItem href="/donate" title="Donate" />
+            </ol>
+          </nav>
+        </aside>
+        <section className="w-full">{children}</section>
+      </div>
+    </section>
+  )
+}
+
+const AsideItem = ({ title, href }: { title: string; href: string }) => {
+  const pathname = usePathname()
+  return (
+    <Link href={href}>
+      <li>
+        <button
+          className={`w-[calc(100%-20px)] mb-3 p-8 text-gray-500 bg-gray-800 text-start ${
+            pathname === href
+              ? "border border-primary text-primary bg-transparent"
+              : "hover:bg-gray-800/70"
+          }`}
+        >
+          {title}
+        </button>
+      </li>
+    </Link>
+  )
+}

src/app/page.tsx

@@ -58,30 +58,6 @@ export default async function Home({ searchParams }: Props) {
             </div>
           </GraphicSection.Foreground>
         </GraphicSection.Root>
-        <GraphicSection.Root href="https://lumeweb.com" className="h-[300px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110">
-          <GraphicSection.Background>
-            <img
-              src="/lume-logo-bg.png"
-              className="background transition-transform duration-500 transform-gpu absolute -top-[100px] -left-10"
-              alt=""
-              aria-hidden
-            />
-          </GraphicSection.Background>
-          <GraphicSection.Foreground>
-            <div className="flex flex-col items-start justify-center h-full w-[500px] float-right mr-20">
-              <p className="text-white text-2xl">
-                WEB3.NEWS is a project by <span className="underline">Lume</span>. Let’s build an open, user-owned
-                web together.
-              </p>
-              <div className="link mt-2 flex text-gray-400">
-                <span>
-                  Learn more about Lume and join our community
-                </span>
-                <ArrowIcon className=" ml-2 mt-2"/>
-              </div>
-            </div>
-          </GraphicSection.Foreground>
-        </GraphicSection.Root>
       </div>
     </>
   )

src/app/search/page.tsx

@@ -24,7 +24,7 @@ const Page = async ({ searchParams }: Props) => {
       />
 
       <Link href="/">
-        <button className="my-4 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
+        <button className="my-4 -ml-3 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
           <ArrowLeftIcon className="w-4 h-4 inline mr-2 -mt-1" />
           Go Back Home
         </button>

src/components/ArrowIcon.tsx

@@ -8,29 +8,29 @@ export const ArrowIcon = ({className}: {className?: string}) => {
       className={className}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_61_133)">
+      <g clipPath="url(#clip0_61_133)">
         <path
           d="M3.30432 1.71807L8.28174 1.71826"
           stroke="currentColor"
-          stroke-opacity="0.75"
+          strokeOpacity="0.75"
-          stroke-width="2"
+          strokeWidth="2"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
-          stroke-linecap="square"
+          strokeLinecap="square"
         />
         <path
           d="M8.28175 1.7183L8.28198 6.6958"
           stroke="currentColor"
-          stroke-opacity="0.75"
+          strokeOpacity="0.75"
-          stroke-width="2"
+          strokeWidth="2"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
-          stroke-linecap="square"
+          strokeLinecap="square"
         />
         <path
           d="M8.28149 1.71834L1.25024 8.74951"
           stroke="currentColor"
-          stroke-opacity="0.75"
+          strokeOpacity="0.75"
-          stroke-width="2"
+          strokeWidth="2"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
         />
       </g>
       <defs>

src/components/LayoutFooter.tsx

@@ -1,12 +1,13 @@
+import Link from "next/link"
 import React from "react"
 
 type Props = {}
 
 const Footer = ({}: Props) => {
 return (<div className="w-full mt-5 flex flex-row items-center justify-center text-gray-400">
-    <a>About Web3.news</a>
+    <Link href="/about" className="hover:text-white hover:underline">About Web3.news</Link>
     <div className="h-7 w-[1px] bg-current mx-4" />
-    <a className="text-white">Contribute to the cause</a>
+    <Link href="/donate" className="hover:text-white hover:underline">Contribute to the cause</Link>
 </div>)
 }