feat: add styling to the about page

packages/website/components/footer.js

@@ -1,41 +1,39 @@
 import Link from 'next/link'
 export default function Footer() {
   return (
-    <footer className="flex items-center justify-between py-8 max-w-screen-2xl mx-auto mt-auto w-full">
-      <div>
-        <span className="text-lg">
+    <footer className="mt-auto text-w3storage-purple">
+      <div className="layout-margins flex flex-col xl:flex-row items-left xl:items-center justify-between py-8">
+        <div className="text-lg mb-4 xl:mb-0">
           Made with ❤️ by{' '}
           <a
             href="https://protocol.ai/"
             className="font-bold no-underline hover:underline"
           >
             Protocol Labs
           </a>
-        </span>
-      </div>
-      <div>
-        <span className="db db-m dib-ns mv3">
-          <a
-            href="https://status.web3.storage/"
-            className="font-bold no-underline hover:underline mr-6"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Status
-          </a>
-        </span>
-        <Link href="/terms">
-          <a className="font-bold no-underline hover:underline mr-8">
-            Terms of Service
-          </a>
-        </Link>
-        <span>Need Help?{' '}</span>
-        <a
-          href="https://github.com/web3-storage/web3.storage/issues/new"
-          className="font-bold no-underline hover:underline"
-        >
-          Open an Issue
-        </a>
+        </div>
+        <div className="flex flex-col sm:flex-row">
+          <Link href="https://status.web3.storage/">
+            <a className="font-bold no-underline hover:underline mr-6 md:mr-12">
+              Status
+            </a>
+          </Link>
+          <Link href="/terms">
+            <a className="font-bold no-underline hover:underline mr-6 md:mr-12">
+              Terms of Service
+            </a>
+          </Link>
+          <Link href="https://github.com/web3-storage/web3.storage/issues/new">
+            <a className="font-bold no-underline hover:underline mr-6 md:mr-12" target="_blank" rel="noreferrer">
+              Open an issue
+            </a>
+          </Link>
+          <Link href="/">
+            <a className="font-bold no-underline hover:underline">
+              Join us on Slack
+            </a>
+          </Link>
+        </div>
       </div>
     </footer>
   )

packages/website/components/hero.js

@@ -21,4 +21,4 @@ export default function Hero() {
       </div>
     </div>
   )
-}
+}

packages/website/components/layout.js

@@ -22,8 +22,8 @@ export default function Layout({
   redirectIfFound = false,
   title = 'Web3 Storage - The simple file storage service for IPFS & Filecoin.',
   description = 'Web3 Storage',
-  navBgColor = 'white',
-  pageBgColor = 'bg-white',
+  pageBgColor = 'bg-w3storage-background',
+  navBgColor,
   data = null,
 }) {
   const { user, status } = useUser({
@@ -60,7 +60,7 @@ export default function Layout({
         </>
       ) : (
         <>
-          <Navbar bgColor={navBgColor} user={user} />
+          <Navbar user={user} bgColor={navBgColor} />
           {children({ user, data })}
           <Footer />
         </>

packages/website/components/navbar.js

@@ -11,7 +11,7 @@ import Button from './button.js'
  * @param {string} [props.bgColor]
  * @param {any} [props.user]
  */
-export default function Navbar({ bgColor = 'white', user }) {
+export default function Navbar({ bgColor = '', user }) {
   const queryClient = useQueryClient()
   async function logout() {
     await getMagic().user.logout()
@@ -20,31 +20,32 @@ export default function Navbar({ bgColor = 'white', user }) {
   }
 
   return (
-    <nav className={`bg-${bgColor} w-full border border-gray-400`}>
+    <nav className={`${bgColor} w-full z-10`}>
       <div className="flex items-center justify-between py-3 mx-auto max-w-screen-2xl">
         <Link href="/">
           <a title="Web3 Storage">⁂</a>
         </Link>
         <div>
           <Link href="/about">
-            <a className="text-black font-bold no-underline hover:underline align-middle mr-12">
+            <a className="text-w3storage-purple font-bold no-underline hover:underline align-middle mr-12">
               About
             </a>
           </Link>
-          <Link href="/docs">
-            <a className="text-black font-bold no-underline hover:underline align-middle mr-12">
-              Documentation
+          {/* TODO: change docs link before going live */}
+          <Link href="https://web3-storage-docs.on.fleek.co/">
+            <a className="text-w3storage-purple font-bold no-underline hover:underline align-middle mr-12">
+              Docs
             </a>
           </Link>
           {user ? (
             <>
               <Link href="/files">
-                <a className="text-black font-bold no-underline hover:underline align-middle mr-12">
+                <a className="text-w3storage-purple font-bold no-underline hover:underline align-middle mr-12">
                   Files
                 </a>
               </Link>
-              <Link href="/account">
-                <a className="text-black font-bold no-underline hover:underline align-middle mr-12">
+              <Link href="/profile">
+                <a className="text-w3storage-purple font-bold no-underline hover:underline align-middle mr-12">
                   Profile
                 </a>
               </Link>

packages/website/components/types.d.ts

@@ -7,7 +7,7 @@ export interface LayoutProps {
   redirectIfFound?: boolean
   title?: string
   description?: string
-  pageBgColor?: string,
+  pageBgColor?: string
   navBgColor?: string
   data?: any
 }

packages/website/content/about.md

@@ -30,8 +30,4 @@ For reference, the following parameters and strategies are used to ensure highly
 
 It is recommended that you do not rely on Filecoin deals directly for performant retrieval, and instead you allow [Web3.Storage](http://web3.storage) to make the data available in IPFS. Retrieving data over the IPFS network is the recommended means of accessing [Web3.Storage](http://web3.storage) data.
 
-### Terms of service
-
-The following terms and conditions govern all use of the web3.storage website (the “Website”) and all content, services and products available at or through the Website. The Website is offered subject to your acceptance without modification of all of the terms and conditions contained herein. As all data uploaded to web3.storage will be stored on IPFS, this website incorporates the Terms of Service of [IPFS.io](http://ipfs.io/).
-
-If you do not agree to all the terms and conditions of this agreement, then you may not access the Website or use any services.
+### [Terms of service](/terms)