refactor: design polish to landing (#258)

README.md

@@ -9,6 +9,12 @@ No wrappers. No lock-in. Open-source.
 [**Overview**](https://www.commonality.co/docs/overview)    
 [**Get started**](https://www.commonality.co/docs/getting-started)
 
+Run the command below in an existing project to set up Commonality in seconds
+
+```sh
+npx commonality init
+```
+
 ## Features
 
 Every feature in Commonality is designed to be adopted incrementally. Start with a single package and scale it to an entire organization.

apps/documentation/components/bento-section.tsx

@@ -40,7 +40,7 @@ function CheckCard({
 
 export function BentoSection() {
   return (
-    <div className="py-20 md:py-32 w-full bg-interactive relative px-6 z-10">
+    <div className="py-24 md:py-48 w-full bg-interactive relative px-6 z-10">
       <div className="mx-auto text-center mb-12">
         <h2 className="text-4xl md:text-5xl font-semibold text-primary mb-4 leading-none text-center">
           <Balancer>
@@ -49,8 +49,8 @@ export function BentoSection() {
         </h2>
         <p className="max-w-3xl mx-auto text-muted-foreground text-base md:text-lg font-medium">
           <Balancer>
-            Automate away the tedious maintenance of growing monorepos and
-            package ecosystems.
+            Codify best practices and workflows across an infinite number of
+            packages.
           </Balancer>
         </p>
       </div>
@@ -60,7 +60,7 @@ export function BentoSection() {
           <div className="flex md:items-center order-2 md:order-1">
             <div>
               <p className="font-semibold mb-4 text-3xl text-primary">Checks</p>
-              <p className="text-muted-foreground mb-8">
+              <p className="text-muted-foreground mb-8 font-medium">
                 Scale a consistently amazing developer experience with dynamic
                 conformance checks that are run like tests and shared like lint
                 rules.

apps/documentation/components/cta-section.tsx

@@ -5,7 +5,7 @@ import Balancer from 'react-wrap-balancer';
 
 export function CallToActionSection() {
   return (
-    <div className="flex justify-center w-full pb-20 md:pb-32 flex-col items-center bg-interactive px-6">
+    <div className="flex justify-center w-full pb-24 md:pb-48 flex-col items-center bg-interactive px-6">
       <h2 className="text-4xl md:text-5xl font-semibold text-primary mb-4 leading-none text-center">
         <Balancer>Get started in seconds</Balancer>
       </h2>

apps/documentation/components/hero-section.tsx

@@ -14,7 +14,8 @@ export function HeroSection() {
         <div className="absolute top-0 right-0 bottom-0 left-0 noise z-40" />
         <div className="absolute h-[1300px] -bottom-[500px] left-1/2 -translate-x-1/2 w-[800px] md:w-[1300px] z-[35] glow" />
         <div className="absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-b from-interactive z-30 from-15%" />
-        <Grid className="object-cover object-center h-full rounded-2xl z-20 relative" />
+
+        <Grid className="z-20 object-cover object-center h-full relative left-1/2 -translate-x-1/2" />
 
         <div className="absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-t from-background z-10" />
       </div>
@@ -52,7 +53,7 @@ export function HeroSection() {
         </div>
 
         <div className="flex justify-center grow h-full pointer-events-none relative">
-          <Cube className="z-10 relative max-w-[250px] md:max-w-[400px] min-w-[325px] w-full -mb-16" />
+          <Cube className="z-10 relative max-w-[225px] md:max-w-[400px] md:min-w-[325px] w-full -mb-16" />
         </div>
       </div>
       <HeroFooter className="w-full pointer-events-none absolute left-0 right-0 -bottom-2 pt-1/3 z-[2]" />