Design updates (#279)

* Update package-lock.json * Update Button.jsx * Update Hero.jsx * Update Button.jsx * Update Hero.jsx * Fix outlines * Update Hero.jsx * Update Navbar.jsx
storj · Sep 26, 2023 · 80eb7ac · 80eb7ac
1 parent fd4e3f6
commit 80eb7ac
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -3,9 +3,10 @@ import clsx from 'clsx'
 
 const styles = {
   primary:
-    'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500',
+    'rounded-lg bg-storj-blue-700 py-3 px-5 text-sm font-bold text-white hover:bg-storj-blue-600 focus-visible:outline-offset-2 active:bg-storj-blue-500',
+
   secondary:
-    'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
+    'rounded-lg bg-slate-800 py-3 px-5 text-sm font-bold text-white hover:bg-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 active:text-slate-400',
 }
 
 export function Button({ variant = 'primary', className, href, ...props }) {

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -3,8 +3,6 @@ import clsx from 'clsx'
 
 import { Button } from '@/components/Button'
 import { HeroBackground } from '@/components/HeroBackground'
-import blurCyanImage from '@/images/blur-cyan.png'
-import blurIndigoImage from '@/images/blur-indigo.png'
 import Fence, { transparent } from './Fence'
 import { HeroCode } from '@/components/HeroCode'
 
@@ -22,58 +20,31 @@ export function Hero({ className }) {
   return (
     <div
       className={clsx(
-        'overflow-hidden bg-slate-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-8rem] dark:lg:pt-[4.5rem]',
+        'overflow-hidden',
         className
       )}
     >
       <div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
         <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">
-            <Image
-              className="absolute bottom-full right-full -mb-56 -mr-72 opacity-50"
-              src={blurCyanImage}
-              alt=""
-              width={530}
-              height={530}
-              unoptimized
-              priority
-            />
             <div className="relative">
-              <p className="inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
+              <h1 className="inline font-semibold text-3xl tracking-tight">
                 Make the world your datacenter
-              </p>
-              <p className="mt-3 text-2xl tracking-tight text-slate-400">
+              </h1>
+              <p className="mt-3 text-xl tracking-tight text-slate-700 dark:text-slate-400">
                 Store every byte with Storj&apos;s distributed nodes, ensuring
                 your data is everywhere, even before you need it.
               </p>
-              <div className="mt-8 flex gap-4 md:justify-center lg:justify-start">
+              <div className="mt-6 flex gap-4 md:justify-center lg:justify-start">
                 <Button href="/dcs/getting-started">Quick Start</Button>
               </div>
             </div>
           </div>
           <div className="relative lg:static xl:pl-10">
-            <div className="absolute inset-x-[-50vw] -bottom-48 -top-32 [mask-image:linear-gradient(white,transparent)] md:[mask-image:linear-gradient(white,white,transparent)] lg:[mask-image:linear-gradient(white,transparent,white)]">
-              <HeroBackground className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 lg:left-1/2 lg:-translate-x-1/2 lg:translate-y-[-60%]" />
+            <div className="absolute inset-x-[-50vw] -bottom-32 -top-32 [mask-image:linear-gradient(white,transparent)] md:[mask-image:linear-gradient(white,white,transparent)] lg:[mask-image:linear-gradient(white,transparent,white)]">
+              <HeroBackground className="dark:opacity-20 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 lg:left-1/2 lg:-translate-x-1/2 lg:translate-y-[-60%]" />
             </div>
             <div className="relative">
-              <Image
-                className="absolute -right-64 -top-64"
-                src={blurCyanImage}
-                alt=""
-                width={530}
-                height={530}
-                unoptimized
-                priority
-              />
-              <Image
-                className="absolute -bottom-40 -right-44"
-                src={blurIndigoImage}
-                alt=""
-                width={567}
-                height={567}
-                unoptimized
-                priority
-              />
               <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10 blur-lg" />
               <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10" />
               <div className="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -68,7 +68,7 @@ export default function Navbar() {
         </div>
       </div>
       <nav
-        className="mt-4 hidden lg:flex lg:space-x-8 lg:py-2"
+        className="mt-5 hidden lg:flex lg:space-x-8 py-4"
         aria-label="Global"
       >
         <Spaces />