Jelajahi Sumber

feat(docs): Improve landing page

Michael Bromley 5 tahun lalu
induk
melakukan
ba82ea0d09
3 mengubah file dengan 28 tambahan dan 7 penghapusan
  1. 8 0
      docs/assets/styles/_landing-page.scss
  2. 20 7
      docs/layouts/index.en.html
  3. TEMPAT SAMPAH
      docs/static/features-frameworks.jpg

+ 8 - 0
docs/assets/styles/_landing-page.scss

@@ -37,6 +37,9 @@
         @media screen and (max-width: $sm-breakpoint) {
             font-size: 1.2em;
         }
+        strong {
+            font-weight: bold;
+        }
     }
 
     .content {
@@ -175,6 +178,11 @@
                 flex-direction: column;
             }
         }
+        .install-code {
+            width: 71vw;
+            margin: auto;
+            margin-bottom: $padding-16 * 2;
+        }
         .install-code, .getting-started-link {
             flex: 1;
         }

+ 20 - 7
docs/layouts/index.en.html

@@ -58,7 +58,6 @@
             </div>
         </div>
         <p class="lead">Vendure is a new e-commerce framework built for the developers who are building the modern web.<br>
-                   <img src="{{ "svg/clr-icon-book-light.svg" | relURL }}" alt="check icon"> Read: <a href="{{ "blog/introducing-vendure" | relURL }}">Introducing Vendure</a></p>
 
         <div class="stack-logos">
             <div class="stack-logo ts-logo">
@@ -84,7 +83,7 @@
                 <div class="feature-copy">
                     <h3>De-coupled & Flexible</h3>
                     <p class="lead">
-                        Vendure is a headless framework, meaning that it delivers content through its <a href="https://graphql.org/">GraphQL API</a>, leaving you free to
+                        Vendure is a <strong>headless framework</strong>, meaning that it delivers content through its <a href="https://graphql.org/">GraphQL API</a>, leaving you free to
                         implement your store-front applications in the technologies of your choice.
                     </p>
                 </div>
@@ -97,11 +96,11 @@
                 <div class="feature-copy">
                     <h3>Made for Developers</h3>
                     <p class="lead">
-                        Vendure makes developer productivity a top priority. The framework is written in TypeScript and is
+                        Vendure makes <strong>developer productivity</strong> a top priority. The framework is written in TypeScript and is
                         built on the npm ecosystem.
                     </p>
                     <p class="lead">
-                        The combination of TypeScript and GraphQL provides end-to-end type safety.
+                        The combination of TypeScript and GraphQL provides <strong>end-to-end type safety</strong>.
                     </p>
                 </div>
                 <div class="feature-image">
@@ -116,13 +115,28 @@
                         Vendure is available under the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>.
                     </p>
                     <p class="lead">
-                        All development of the core framework is being done in the open on <a href="https://github.com/vendure-ecommerce/vendure">GitHub</a>.
+                        All development of the core framework is being done <strong>in the open</strong> on <a href="https://github.com/vendure-ecommerce/vendure">GitHub</a>.
                     </p>
                 </div>
                 <div class="feature-image">
                     <img src="{{ "features-oss.png" | relURL }}">
                 </div>
             </div>
+
+            <div class="feature">
+                <div class="feature-copy">
+                    <h3>Works with your favourite tech</h3>
+                    <p class="lead">
+                        With Vendure you <strong>free to choose</strong> the front-end technology you know best.
+                    </p>
+                    <p class="lead">
+                        You and your team have expertise. Use it to <strong>rapidly</strong> build the storefront your clients have dreamed of.
+                    </p>
+                </div>
+                <div class="feature-image">
+                    <img src="{{ "features-frameworks.jpg" | relURL }}">
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -147,7 +161,6 @@
             <li><img src="{{ "svg/clr-icon-check-brand.svg" | relURL }}" alt="check icon">Guest checkouts</li>
         </ul>
         </div>
-        <p><small>The above features are either already implemented or planned for the beta release</small></p>
     </div>
 </div>
 <div class="section-4">
@@ -168,7 +181,7 @@
         <div class="getting-started-link">
 
             <a href="{{ "docs/getting-started" | relURL }}" class="getting-started-button">
-            <img src="{{ "svg/clr-icon-bolt-light.svg" | relURL }}"> Getting Started Guide
+            <img src="{{ "svg/clr-icon-bolt-light.svg" | relURL }}"> Get Started Now
             </a>
         </div>
     </div>

TEMPAT SAMPAH
docs/static/features-frameworks.jpg