fix(website): Add font and small style changes.

packages/website/pages/home/components/info_box.yaml.njk

@@ -15,14 +15,15 @@ blocks:
     type: Html
     properties:
       style:
-        minHeight: 200
+        minHeight: 190
       html: |
         <h4>{{ title }}</h4>
         <p>{{ info }}</p>
   - id: {{ section }}_link
     type: Button
     style:
-      padding: 0
+      paddingLeft: 0
+      paddingRight: 0
     properties:
       title: {{ link.title }}
       type: link

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

@@ -24,10 +24,10 @@ blocks:
               Lowdefy config is easy to read, write, copy, paste or template. Just like code, but simpler.
             </p>
             <ul>
-              <li><p>+70 Blocks and +150 logic operators to get started fast.</p></li>
-              <li><p>Dynamic UIs with effortless state management.</p></li>
-              <li><p>Responsive layouts out of the box.</p></li>
-              <li><p>Extend with custom React components.</p></li>
+              <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>
+              <li>Extend with custom React components.</li>
             </ul>
 
       - id: visit_docs

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

@@ -28,10 +28,10 @@ blocks:
               Make API calls and read and write to your databases with minimal config. Build web apps that connect your data.
             </p>
             <ul>
-              <li><p>Build dynamic queries using variables and logic operators.</p></li>
-              <li><p>Execute requests from both authenticated and public pages.</p></li>
-              <li><p>Secure secrets for passwords and API keys.</p></li>
-              <li><p>Build custom connections with any npm modules.</p></li>
+              <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>
+              <li>Build custom connections with any npm modules.</li>
             </ul>
       - id: custom_connection
         type: Button

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

@@ -11,7 +11,7 @@ style:
   borderRadius: 8px
 properties:
   style:
-    padding: 20px
+    padding: 60px
 blocks:
   - id: title
     type: Html

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

@@ -23,10 +23,10 @@ blocks:
               config webstack
             </h1>
             <ul>
-              <li><p>Build web UIs and connect to databases and APIs</p></li>
-              <li><p>Extend app functionality with npm plugins</p></li>
-              <li><p>Host your apps anywhere you host Next.js</p></li>
-              <li><p>Open-source and built on top of Next.js and Auth.js</p></li>
+              <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.
       - id: get_started_button

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

@@ -7,7 +7,7 @@ blocks:
   - id: open_source_box
     type: Box
     style:
-      maxWidth: 900px
+      maxWidth: 1100px
       margin: 60px auto
       padding: 40px 20px
     layout:

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

@@ -26,7 +26,7 @@ blocks:
         properties:
           html: |
             <h2>
-              Extend <span style="color: #29D3CA">everything</span> with plugins
+              Extend <span style="color: #29D3CA">everything</span><br> with NPM plugins
             </h2>
             <p>
               Blocks, Connections, Operators, Actions, Auth Providers and Adapters can all be extended with plugins, making Lowdefy the most flexible low-code web stack.

packages/website/public/styles.less

@@ -1,8 +1,13 @@
+@font-face {
+  font-family: "Geologica";
+  src: url('fonts/Geologica-VariableFont_CRSV,SHRP,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 */
 
@@ -17,6 +22,7 @@ h1 {
 }
 
 h2 {
+  font-family: Geologica;
   font-size: 1.5rem; /* 24px */
   line-height: 2rem; /* 32px */
 
@@ -31,6 +37,7 @@ h2 {
 }
 
 h3 {
+  font-family: Geologica;
   font-size: 1.125rem; /* 18px */
   line-height: 1.75rem; /* 28px */
 
@@ -46,6 +53,7 @@ h3 {
 }
 
 h4 {
+  font-family: Geologica;
   font-size: 1rem; /* 16px */
   line-height: 1.5rem; /* 24px */
 
@@ -60,6 +68,7 @@ h4 {
 }
 
 h5 {
+  font-family: Geologica;
   font-size: 0.875rem; /* 14px */
   line-height: 1rem; /* 22px */
 
@@ -80,6 +89,13 @@ p {
   }
 }
 
+li {
+  font-size: 0.875rem; /* 14px */
+  @media @min992 {
+    font-size: 1rem; /* 16px */
+  }
+}
+
 hr {
   height: 2px;
   width:30%;

packages/website/shared/footer/footer.yaml

@@ -2,18 +2,28 @@ id: footer_box
 type: Box
 style:
   maxWidth: 1200px
-  margin: -250px auto
-  marginBottom: 24px
+  margin: -200px auto
+  marginBottom:
+    _if:
+      test:
+        _ref: shared/mobile.yaml
+      then: 0
+      else: 24px
 properties:
   style:
-    padding: 0px 5% 16px 5%
+    padding:
+      _if:
+        test:
+          _ref: shared/mobile.yaml
+        then: 0px 10px 16px 10px
+        else: 0px 30px 16px 30px
     boxShadow: 0px 21px 80px rgba(15, 33, 51, 0.25)
     borderRadius: 8px
 blocks:
   - id: space_box
     type: Box
     style:
-      minHeight: 200px
+      minHeight: 150px
   - id: connect
     type: Html
     properties: