feat(website): Update typography and hero.

package.json

@@ -53,7 +53,7 @@
     "env:server:next-dev": "pnpm env:cli:build && pnpm install && pnpm -r --filter='@lowdefy/server' dev",
     "env:server": "pnpm -r --filter='@lowdefy/server' build:lowdefy && pnpm install && pnpm -r --filter='@lowdefy/server' build:next && pnpm -r --filter='@lowdefy/server' start",
     "web:cli:build": "pnpm build:turbo && pnpm -r --filter=lowdefy start build --config-directory ../website --server-directory ../server",
-    "web:cli:dev": "pnpm build:turbo && pnpm -r --filter=lowdefy start dev --config-directory ../website --dev-directory ../server-dev",
+    "web:cli:dev": "pnpm build:turbo && pnpm -r --filter=lowdefy start dev --config-directory ../website --dev-directory ../server-dev  --log-level=debug",
     "web:cli:start": "pnpm build:turbo && pnpm -r --filter=lowdefy start start --config-directory ../website --server-directory ../server",
     "web:server-dev": "pnpm -r --filter='@lowdefy/server-dev' start --config-directory ../website",
     "web:server:next-dev": "pnpm website:cli:build && pnpm install && pnpm -r --filter='@lowdefy/server' dev",

packages/server-dev/package.json

@@ -66,6 +66,7 @@
     "@lowdefy/operators-uuid": "4.0.0-rc.8",
     "@lowdefy/operators-yaml": "4.0.0-rc.8",
     "@lowdefy/plugin-next-auth": "4.0.0-rc.8",
+    "@lowdefy/website": "workspace:*",
     "chokidar": "3.5.3",
     "dotenv": "16.0.3",
     "next": "12.3.1",

packages/website/pages/home/home.yaml

@@ -1,10 +1,7 @@
 id: home
 type: Box
-layout:
-  contentGutter: 16
 properties:
-  title: Lowdefy - Build internal tools with YAML
-
+  title: Lowdefy - The Easiest Config Web Stack
 blocks:
   - _ref: shared/header/header.yaml
   - _ref: pages/home/sections/hero.yaml

packages/website/pages/home/sections/build_uis.yaml

@@ -18,12 +18,12 @@ blocks:
         properties:
           html: |
             <h2>
-              Build <span style="color:#29D3CA">web UIs</span> by writing easy config
+              Build <span style="color:#29D3CA">web UIs</span> with config
             </h2>
             <p>
               Lowdefy config is easy to read, write, copy, paste or template. Just like code, but simpler.
             </p>
-            <ul>
+            <ul class="checks">
               <li>+70 Blocks and +150 logic operators to get started fast.</li>
               <li>Dynamic UIs with effortless state management.</li>
               <li>Responsive layouts out of the box.</li>

packages/website/pages/home/sections/connect.yaml

@@ -27,7 +27,7 @@ blocks:
             <p>
               Make API calls and read and write to your databases with minimal config. Build web apps that connect your data.
             </p>
-            <ul>
+            <ul class="checks">
               <li>Build dynamic queries using variables and logic operators.</li>
               <li>Execute requests from both authenticated and public pages.</li>
               <li>Secure secrets for passwords and API keys.</li>

packages/website/pages/home/sections/customers.yaml

@@ -13,7 +13,7 @@ blocks:
           padding: 8px
         properties:
           html: |
-            <h4 style="color:#D3D3D3;">Customer apps powered by Lowdefy</h4>
+            <p style="color:#D3D3D3;">Customer apps powered by Lowdefy</p>
 
       - id: marquee
         type: Html

packages/website/pages/home/sections/enterprise_features.yaml

@@ -62,7 +62,7 @@ blocks:
               width: 120px
             section: git_control
             title: Git Control for Humans
-            info: Lowdefy minimal config was designed to be easy to read, write and understand. This makes it easy to copy, paste, review changes or pick up where others left off. Defining apps using a structured schema speeds up development in teams big and small.
+            info: Lowdefy's minimal config was designed to be easy to read, write and understand. This makes it easy to copy, paste, review changes or pick up where others left off. Defining apps using a structured schema speeds up development in teams big and small.
             link:
               title: Read more about the Lowdefy app schema
               href: https://docs.lowdefy.com/lowdefy-schema

packages/website/pages/home/sections/hero.yaml

@@ -2,67 +2,85 @@ id: hero
 type: Box
 style:
   maxWidth: 1200px
-  margin: 60px auto
+  margin: 60px auto 20px auto
 blocks:
   - id: hero_box
     type: Box
     layout:
       span: 12
-      contentGutter: 8
+      contentGutter: 18
       align: middle
     style:
-      padding: 20px
+      padding: 20
     blocks:
       - id: hero_content
         type: Html
         properties:
           html: |
+            <p style="color: #A3A3A3;">Open-Source - Self Hosted - NPM Plugins - For Developers</p>
             <h1>
               The
               <span style="color:#4484F1;">easiest</span>
-              config webstack
+              config web stack that runs
+              <span style="color:#4484F1;">Next.js</span>
             </h1>
-            <ul>
-              <li>Build web UIs and connect to databases and APIs</li>
-              <li>Extend app functionality with npm plugins</li>
-              <li>Host your apps anywhere you host Next.js</li>
-              <li>Open-source and built on top of Next.js and Auth.js</li>
-            </ul>
-            <p> Create internal tools, admin panels, BI dashboards, and CRUD apps with simple YAML or JSON config.
+            <h5 style="color: #A3A3A3;">Create web apps, internal tools, admin panels, BI dashboards, and CRUD apps with YAML or JSON config.</h5>
+
       - id: get_started_button
         type: Button
         layout:
           flex: 0 1 auto
         properties:
           title: Get Started
           shape: round
+          size: large
           style:
             background: '#4484F1'
-      - id: expert_button
-        type: Button
-        layout:
-          flex: 0 1 auto
-        properties:
-          title: Book an Expert
-          ghost: true
-          shape: round
-      - id: tutorial_button
-        type: Button
+
+      - id: code_box
+        type: Box
         layout:
           flex: 0 1 auto
-        properties:
-          title: Watch Tutorial
-          shape: round
-          style:
-            background: '#1A1A1A'
-            borderColor: '#1A1A1A'
-        events:
-          onClick:
-            - id: OpenModal
-              type: CallMethod
-              params:
-                blockId: watch_modal
-                method: toggleOpen
+        blocks:
+          - id: code_button
+            type: Button
+            properties:
+              title: |
+                > pnpx lowdefy@4 dev
+              ghost: true
+              shape: round
+              size: large
+              block: true
+              style:
+                whiteSpace: normal
+                boxShadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+                fontFamily: monospace
+            events:
+              onMount:
+                - id: set_extra
+                  type: SetState
+                  params:
+                    button_extra: Click to copy
+              onClick:
+                - id: copy
+                  type: CopyToClipboard
+                  params:
+                    copy: pnpx lowdefy@4 init && pnpx lowdefy@4 dev
+                - id: set_extra
+                  type: SetState
+                  params:
+                    button_extra: Copied.
+
+          - id: copy_text
+            type: Paragraph
+            properties:
+              style:
+                color: '#A3A3A3'
+                fontSize: 0.8em
+                paddingTop: 4px
+                textAlign: center
+              content:
+                _state: button_extra
 
   - id: watch_box
     type: Box

packages/website/public/styles.less

@@ -1,99 +1,67 @@
 @font-face {
-  font-family: "Geologica";
-  src: url('fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf') format('truetype');
+  font-family: "Inter";
+  src: url('fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
 }
 
 @min768: ~"(min-width: 768px)";
 @min992: ~"(min-width: 992px)";
 
-h1 {
-  font-family: Geologica;
-  font-size: 1.875rem; /* 30px */
-  line-height: 2.25rem; /* 36px */
+html {
+  font-size: 103%;
+} /*18px*/
 
-  @media @min768 {
-    font-size: 2.25rem; /* 36px */
-    line-height: 2.5rem; /* 40px */
-  }
-  @media @min992 {
-    font-size: 3rem; /* 48px */
-    line-height: 3.25rem;
-  }
+body {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  line-height: 1.75;
+  font-size: 100%;
 }
 
-h2 {
-  font-family: Geologica;
-  font-size: 1.5rem; /* 24px */
-  line-height: 2rem; /* 32px */
+p {
+  margin-bottom: 1rem;
+}
 
-  @media @min768 {
-    font-size: 1.875rem; /* 30px */
-    line-height: 2.25rem; /* 36px */
-  }
-  @media @min992 {
-    font-size: 2.25rem; /* 36px */
-    line-height: 2.5rem; /* 40px */
-  }
+h1, h2, h3, h4, h5 {
+  // margin: 3rem 0 1.38rem;
+  font-family: Inter, sans-serif;
+  font-weight: 800;
+  line-height: 1.3;
 }
 
-h3 {
-  font-family: Geologica;
-  font-size: 1.125rem; /* 18px */
-  line-height: 1.75rem; /* 28px */
+h1 {
+  margin-top: 0;
+  font-size: 3.052rem;
+}
 
-  @media @min768 {
-    font-size: 1.25rem; /* 20px */
-    line-height: 1.75rem; /* 28px */
-  }
+h2 {
+  font-size: 2.441rem;
+}
 
-  @media @min992 {
-    font-size: 1.5rem; /* 24px */
-    line-height: 2rem; /* 32px */
-  }
+h3 {
+  font-size: 1.953rem;
 }
 
 h4 {
-  font-family: Geologica;
-  font-size: 1rem; /* 16px */
-  line-height: 1.5rem; /* 24px */
-
-  @media @min768 {
-    font-size: 1.125rem; /* 18px */
-    line-height: 1.75rem; /* 28px */
-  }
-  @media @min992 {
-    font-size: 1.25rem; /* 20px */
-    line-height: 1.75rem; /* 28px */
-  }
+  font-size: 1.563rem;
+  font-weight: 500;
 }
 
 h5 {
-  font-family: Geologica;
-  font-size: 0.875rem; /* 14px */
-  line-height: 1rem; /* 22px */
-
-  @media @min768 {
-    font-size: 1rem; /* 16px */
-    line-height: 1.5rem; /* 24px */
-  }
-  @media @min992 {
-    font-size: 1.125rem; /* 18px */
-    line-height: 1.75rem; /* 28px */
-  }
+  font-size: 1.25rem;
+  font-weight: 500;
 }
 
-p {
-  font-size: 0.875rem; /* 14px */
-  @media @min992 {
-    font-size: 1rem; /* 16px */
-  }
+small, .text_small {font-size: 0.8rem;}
+
+ul.checks {
+  list-style: none;
+  padding-inline-start: 0;
 }
 
-li {
-  font-size: 0.875rem; /* 14px */
-  @media @min992 {
-    font-size: 1rem; /* 16px */
-  }
+ul.checks li:before {
+  content: '✓';
+  color: #1890ff;
+  padding-right: 1rem;
 }
 
 hr {

packages/website/shared/header/cta_buttons.yaml

@@ -10,10 +10,18 @@ blocks:
     properties:
       title: Join our Discord
       icon: FaDiscord
-      style:
-        color: black
       shape: round
       type: link
+      style:
+        _if:
+          test:
+            _ref: shared/mobile.yaml
+          then:
+            color: black
+            marginTop: 20px
+          else:
+            color: black
+
       href: https://discord.gg/WmcJgXt
 
   - id: github_button
@@ -24,6 +32,12 @@ blocks:
       title: Star on Github
       icon: AiOutlineGithub
       type: link
+      style:
+        _if:
+          test:
+            _ref: shared/mobile.yaml
+          then:
+            marginTop: 20px
     events:
       onClick:
         - id: link
@@ -45,7 +59,7 @@ blocks:
           then:
             background-image: 'linear-gradient(#1890ff, #667eea)'
             width: 300px
-            marginTop: 10px
+            marginTop: 30px
           else:
             background-image: 'linear-gradient(#1890ff, #667eea)'
     events: