fix(website): Small layout changes to website.

lowdefy · Jun 7, 2023 · b7a240e · b7a240e
1 parent 66e01df
commit b7a240e
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 56 deletions.
diff --git a/packages/website/pages/home/sections/build_uis.yaml b/packages/website/pages/home/sections/build_uis.yaml
@@ -1,8 +1,8 @@
 id: width_box
 type: Box
 style:
-  maxWidth: 90%
-  margin: 30px auto
+  maxWidth: 1200px
+  margin: 60px auto
 layout:
   contentAlign: middle
 blocks:
@@ -17,17 +17,17 @@ blocks:
         type: Html
         properties:
           html: |
-            <h3>
+            <h2>
               Build <span style="color:#29D3CA">web UIs</span> by writing easy config
-            </h3>
+            </h2>
             <p>
               Lowdefy config is easy to read, write, copy, paste or template. Just like code, but simpler.
             </p>
             <ul>
-              <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>
+              <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>
             </ul>
 
       - id: visit_docs

diff --git a/packages/website/pages/home/sections/connect.yaml b/packages/website/pages/home/sections/connect.yaml
@@ -1,8 +1,8 @@
 id: connect_box
 type: Box
 style:
-  maxWidth: 90%
-  margin: 30px auto
+  maxWidth: 1200px
+  margin: 60px auto
 layout:
   contentAlign: middle
   contentJustify: center
@@ -21,17 +21,17 @@ blocks:
         type: Html
         properties:
           html: |
-            <h3>
+            <h2>
               Connect to your <span style="color:#29D3CA">data and APIs</span>
-            </h3>
+            </h2>
             <p>
               Make API calls and read and write to your databases with minimal config. Build web apps that connect your data.
             </p>
             <ul>
-              <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>
+              <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>
             </ul>
       - id: custom_connection
         type: Button

diff --git a/packages/website/pages/home/sections/cta_top.yaml b/packages/website/pages/home/sections/cta_top.yaml
@@ -5,13 +5,13 @@ layout:
 style:
   backgroundColor: '#1965F3'
   transparent: 0
-  maxWidth: 80%
+  maxWidth: 1000px
   margin: 60px auto
-  z-index: 1000
+  z-index: 10
   borderRadius: 8px
 properties:
   style:
-    padding: 10%
+    padding: 20px
 blocks:
   - id: title
     type: Html

diff --git a/packages/website/pages/home/sections/customers.yaml b/packages/website/pages/home/sections/customers.yaml
@@ -1,17 +1,19 @@
 id: customers
 type: Box
+style:
+  margin: 60px auto
 blocks:
   - id: customers_box
     type: Box
     blocks:
       - id: brands
         type: Html
         style:
-          maxWidth: 90%
-          marginLeft: 60px
+          textAlign: center
+          padding: 8px
         properties:
           html: |
-            <h3 style="color:#1A1A1ACC;">Customer apps powered by Lowdefy</h3>
+            <h4 style="color:#D3D3D3;">Customer apps powered by Lowdefy</h4>
 
       - id: marquee
         type: Html

diff --git a/packages/website/pages/home/sections/enterprise_features.yaml b/packages/website/pages/home/sections/enterprise_features.yaml
@@ -1,27 +1,31 @@
 id: width_box
 type: Box
-layout:
-  contentGutter: 16
 style:
-  maxWidth: 90%
+  maxWidth: 1200px
   margin: 60px auto
+  padding: 20px
 blocks:
-  - id: enterprise_features_info
+  - id: enterprise_features_left_box
     type: Box
     layout:
       span: 8
-      contentGutter: 10
+    style:
+      padding: 20px
     blocks:
       - id: enterprise_features_title
         type: Html
         properties:
+          style:
+            textAlign: right
           html: |
-            <h3>
+            <h2>
               Built for <span style="color:#1A82E2;">Developers</span> and Enterprise Ready
-            </h3>
+            </h2>
 
   - id: enterprise_features_info
     type: Box
+    style:
+      padding: 20px
     layout:
       span: 16
       contentGutter: 16

diff --git a/packages/website/pages/home/sections/examples.yaml b/packages/website/pages/home/sections/examples.yaml
@@ -4,7 +4,6 @@ layout:
   contentGutter: 8
   justifyContent: center
 style:
-  maxWidth: 90%
   margin: 60px auto
 blocks:
   - id: examples_intro

diff --git a/packages/website/pages/home/sections/hero.yaml b/packages/website/pages/home/sections/hero.yaml
@@ -1,14 +1,7 @@
-# Colours:
-# #4484F1
-# background: linear-gradient(180deg, #4484F1 0%, #65E1DA 100%);
-# background: linear-gradient(0deg, #1A1A1A, #1A1A1A),
-# linear-gradient(0deg, #29D3CA, #29D3CA);
-# background: #1965F3;
-
 id: hero
 type: Box
 style:
-  maxWidth: 90%
+  maxWidth: 1200px
   margin: 60px auto
 blocks:
   - id: hero_box
@@ -24,16 +17,16 @@ blocks:
         type: Html
         properties:
           html: |
-            <h2>
+            <h1>
               The
               <span style="color:#4484F1;">easiest</span>
               config webstack
-            </h2>
+            </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>
+              <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>
             </ul>
             <p> Create internal tools, admin panels, BI dashboards, and CRUD apps with simple YAML or JSON config.
       - id: get_started_button

diff --git a/packages/website/pages/home/sections/open_source.yaml b/packages/website/pages/home/sections/open_source.yaml
@@ -7,8 +7,9 @@ blocks:
   - id: open_source_box
     type: Box
     style:
-      maxWidth: 90%
+      maxWidth: 900px
       margin: 60px auto
+      padding: 40px 20px
     layout:
       contentAlign: middle
       contentGutter: 8
@@ -19,11 +20,11 @@ blocks:
           span: 12
           order: 1
         style:
-          textAlign: center
+          textAlign: right
         properties:
           src: ./images/05_OpenSource_001.png
           style:
-            width: '60%'
+            width: '100%'
 
       - id: info_box
         type: Box
@@ -35,9 +36,9 @@ blocks:
             type: Html
             properties:
               html: |
-                <h3>
+                <h2>
                   Lowdefy is an <span style="color:white;">open-source</span> framework
-                </h3>
+                </h2>
                 <p>
                   Build future proof apps that you can host anywhere with no lock-in.
                 </p>
@@ -111,5 +112,7 @@ blocks:
                   icon: FaDiscord
                   shape: round
                   size: large
+                  style:
+                    borderColor: black
                   type: ghost
                   href: https://discord.gg/WmcJgXt
diff --git a/packages/website/pages/home/sections/plugins.yaml b/packages/website/pages/home/sections/plugins.yaml
@@ -4,9 +4,8 @@ layout:
   contentAlign: middle
   contentGutter: 16
 style:
-  maxWidth: 80%
+  maxWidth: 1000px
   margin: 60px auto
-  textAlign: center
   background: '#FAFAFA'
   box-shadow: 0px 21px 80px rgba(15, 33, 51, 0.25)
   border-radius: 8px
@@ -18,14 +17,17 @@ blocks:
     type: Box
     layout:
       span: 12
+    style:
+      padding: 5px
+      textAlign: right
     blocks:
       - id: info
         type: Html
         properties:
           html: |
-            <h3>
+            <h2>
               Extend <span style="color: #29D3CA">everything</span> with plugins
-            </h3>
+            </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.
             </p>

diff --git a/packages/website/pages/home/sections/testimonials.yaml b/packages/website/pages/home/sections/testimonials.yaml
@@ -9,7 +9,6 @@ blocks:
     layout:
       contentGutter: 8
     style:
-      maxWidth: 90%
       margin: 60px auto
     blocks:
       - id: testimonials_intro

diff --git a/packages/website/public/styles.less b/packages/website/public/styles.less
@@ -12,7 +12,7 @@ h1 {
   }
   @media @min992 {
     font-size: 3rem; /* 48px */
-    line-height: 1;
+    line-height: 3.25rem;
   }
 }
 
@@ -73,6 +73,13 @@ h5 {
   }
 }
 
+p {
+  font-size: 0.875rem; /* 14px */
+  @media @min992 {
+    font-size: 1rem; /* 16px */
+  }
+}
+
 hr {
   height: 2px;
   width:30%;

diff --git a/packages/website/shared/footer/footer.yaml b/packages/website/shared/footer/footer.yaml
@@ -1,7 +1,7 @@
 id: footer_box
 type: Box
 style:
-  maxWidth: 90%
+  maxWidth: 1200px
   margin: -250px auto
   marginBottom: 24px
 properties:

diff --git a/packages/website/shared/header/cta_buttons.yaml b/packages/website/shared/header/cta_buttons.yaml
@@ -3,6 +3,19 @@ type: Box
 layout:
   flex: 0 1 auto
 blocks:
+  - id: discord
+    type: Button
+    layout:
+      flex: 0 1 auto
+    properties:
+      title: Join our Discord
+      icon: FaDiscord
+      style:
+        color: black
+      shape: round
+      type: link
+      href: https://discord.gg/WmcJgXt
+
   - id: github_button
     type: Button
     layout:

diff --git a/packages/website/shared/header/header.yaml b/packages/website/shared/header/header.yaml
@@ -1,5 +1,7 @@
 id: affix_header
 type: Affix
+style:
+  z-index: 20
 blocks:
   - id: header
     type: Header