docs: improve landing page (#68)

* docs: improve landing page

* docs: add feature event publishing

Author: timonback

docs/introduction/introduction.md

@@ -4,6 +4,10 @@ sidebar_position: 10
 
 # Introduction
 
+:::info
+Integrate Springwolf in minutes using the [Quickstart](../quickstart.mdx).
+:::
+
 ## What's Springwolf
 API Documentation is an important part of every project and product, but can be painful to maintain manually.
 Spring Boot projects have great solutions for auto-generated documentation for REST APIs to overcome this pain (such as Springfox, or springdoc-openapi).

docs/quickstart.mdx

@@ -9,7 +9,7 @@ import CodeSpringwolfMaven from '!!raw-loader!./snippets/_springwolf_maven.xml';
 
 # Quickstart
 
-*The following instructions are for Kafka services - but AMQP services configuration is almost same. Check out the [example project for complete examples](https://github.com/springwolf/springwolf-core/tree/master/springwolf-examples).*
+*The following instructions are for Kafka services - other protocols are almost the same. Check out the [example project for complete examples](https://github.com/springwolf/springwolf-core/tree/master/springwolf-examples).*
 
 ## 1. Add dependencies
 

docusaurus.config.js

@@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Springwolf',
-  tagline: 'Automated documentation (and more) for async APIs built with Spring Boot',
+  tagline: 'Automated documentation for event-driven applications built with Spring Boot',
   url: 'https://www.springwolf.dev/',
   baseUrl: '/',
   onBrokenLinks: 'throw',

src/components/HomepageFeatures.js

@@ -14,7 +14,7 @@ const FeatureList = [
     ),
   },
   {
-    title: 'Easy to set up',
+    title: 'Build for Spring',
     description: (
       <>
         Just provide minimal configuration in <code>application.properties</code> and
@@ -23,13 +23,37 @@ const FeatureList = [
     ),
   },
   {
-    title: 'AsyncAPI compliant',
+    title: 'Powered by AsyncAPI v3',
     description: (
       <>
         The generated documentation is compliant with the <Link to='https://www.asyncapi.com/'>AsyncAPI specification</Link>.
       </>
     ),
   },
+  {
+    title: 'Optional web-ui',
+    description: (
+      <>
+        Single dependency ui for API testing including event publishing.
+      </>
+    ),
+  },
+  {
+    title: 'Customizable',
+    description: (
+      <>
+        Extend documentation using <code>@AsyncListener</code> and <code>@AsyncPublisher</code>.
+      </>
+    ),
+  },
+  {
+    title: 'Integrate',
+    description: (
+      <>
+        Generate documentation in your CI/CD pipeline and publish to tools like <Link to="https://backstage.io">Backstage</Link>.
+      </>
+    ),
+  },
 ];
 
 function Feature({Svg, title, description}) {

src/pages/index.js

@@ -11,21 +11,27 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <img src={"img/logo_s.png"} alt={"logo"} width={"200px"} height={"200px"} />
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <h1 className={styles.heroTitle}>
+            <img className={styles.heroLogo} src={"img/logo_s.png"} alt={"logo"} />
+            <span>
+                <b>Automated</b> documentation
+                for <b>event-driven</b> applications
+                built with <b>Spring Boot</b>
+            </span>
+        </h1>
+
         <div className={styles.buttons}>
           <Link
-              className="button button--secondary button--lg"
-              to="https://demo.springwolf.dev/"
-              target={"_blank"}>
-              Live Demo
+            className="button button--secondary button--lg"
+            to="/docs/introduction">
+            Get Started
           </Link>
           &nbsp;
           <Link
-            className="button button--secondary button--lg"
-            to="/docs/quickstart">
-            Springwolf Quickstart - 5min ⏱️
+              className="button button--secondary button--lg"
+              to="https://demo.springwolf.dev/"
+              target={"_blank"}>
+              Try a Demo
           </Link>
         </div>
       </div>

src/pages/index.module.css

@@ -10,6 +10,21 @@
   overflow: hidden;
 }
 
+.heroTitle {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+}
+
+.heroTitle b {
+  color: var(--ifm-color-primary-contrast-foreground);
+}
+
+.heroLogo {
+  float: right;
+  height: auto;
+}
+
 @media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
@@ -21,3 +36,7 @@
   align-items: center;
   justify-content: center;
 }
+.buttons a {
+  margin: 0 0.5rem;
+  --ifm-button-size-multiplier: 1.5;
+}