feat: add features intro for Nebula (#6)

* feat: add features inroduction

* fix: links

config.toml

@@ -1,6 +1,7 @@
 baseurl = "http://127.0.0.1:1313/"
 languageCode = "en-us"
-title = "Hugo Creative Theme"
+title = "Nebula Graph  - An Open Source, Distributed and High Performant Graph Database"
+description = "Featuring horizontal scalability, strong data consistency, high availability, and SQL-like query language, Nebula Graph database enables you to get insight out of your connected data. Get it now. For free"
 theme = "creative"
 googleAnalytics = ""
 
@@ -21,7 +22,6 @@ googleAnalytics = ""
 	# To provide some metadata for search engines feel free to add some
 	# information about you and your website.
 	name = "Your name"
-	description = "Your description"
 
 	# The path must be relative to the static folder
 	favicon = "favicon.ico"
@@ -35,14 +35,15 @@ googleAnalytics = ""
 			title = "Solution"
 			[[params.navigation.links.links]]
 				title = "Why Nebula Graph"
+				link = "/#advantage"
 			[[params.navigation.links.links]]
 				title = "Get Started"
 				link = "https://github.com/vesoft-inc/nebula/blob/master/docs/manual-EN/1.overview/2.quick-start/1.get-started.md"
 				target = "_blank"
-			[[params.navigation.links.links]]
-				title = "Use cases"
-		[[params.navigation.links]]
-			title = "Customers"
+			# [[params.navigation.links.links]]
+			# 	title = "Use cases"
+		# [[params.navigation.links]]
+		# 	title = "Customers"
 		[[params.navigation.links]]
 			title = "Content"
 			[[params.navigation.links.links]]
@@ -53,6 +54,8 @@ googleAnalytics = ""
 				link = "https://github.com/vesoft-inc/nebula#documentation"
 		[[params.navigation.links]]
 			title = "Forum"
+			link = "https://discuss.dgraph.io/"
+			target = "_blank"
 			# services  = "Services"
 			# portfolio = "Portfolio"
 			# contact   = "Contact"
@@ -134,38 +137,56 @@ googleAnalytics = ""
 
 
 	# About section
-	[params.about]
-		headline    = "We've got what you need!"
-		description = "[Lorem](//google.com) ipsum dolor sit amet, consectetur adipisicing elit. Praesentium similique eos eligendi error veritatis harum, sed aliquid totam, quam minus neque enim est architecto, ad. Maiores, aliquid, vitae!"
+	[params.advantage]
+		headline    = "Why Nebula"
+		description = "blablablabla..."
 		buttonText  = "Get started!"
 
 
 	# Service section
-	[params.services]
-		headline = "At your service"
-
-        [[params.services.list]]
-            icon = "fa-diamond"
-            title = "Sturdy Templates"
-            description = "Our templates are updated regularly so they don't break."
-
-        [[params.services.list]]
-			icon = "fa-paper-plane"
-			title = "Ready to Ship"
-			description = "You can use this theme as is, or you can make changes!"
-
-		[[params.services.list]]
-            icon = "fa-newspaper-o"
-            title = "Up to Date"
-            description = "We update dependencies to keep things fresh."
-
-        [[params.services.list]]
-            icon = "fa-heart"
-            title = "Made with Love"
-            description = "You have to make your websites with love these days!"
-
+	[params.features]
+		headline = "Nebula Graph Features"
+
+			[[params.features.list]]
+				pic = "feature1.png"
+				title = "Open Source"
+				description = "We are looking forward to collaborating with the community to popularize and promote the graph database."
+
+      [[params.features.list]]
+				pic = "feature2.png"
+				title = "High Performance"
+				description = "Nebula Graph provides low latency read and write, while still maintaining high throughput."
+
+			[[params.features.list]]
+				pic = "feature3.png"
+				title = "SQL-like"
+				description = "Nebula Graph's SQL-like query language is easy to understand and powerful enough to meet complex business needs."
+
+      [[params.features.list]]
+				pic = "feature4.png"
+				title = "Secure"
+				description = "With role-based access control, Nebula Graph only allows authenticated access."
+
+      [[params.features.list]]
+				pic = "feature5.png"
+				title = "Scalable"
+				description = "With shared-nothing distributed architecture, Nebula Graph offers linear scalability."
+
+      [[params.features.list]]
+				pic = "feature6.png"
+				title = "Extensible"
+				description = "Nebula Graph supports multiple storage engine types. The query language can be extended to support new algorithms."
+
+      [[params.features.list]]
+				pic = "feature7.png"
+				title = "Transactional"
+				description = "With role-based access control, Nebula Graph only allows authenticated access."
+
+      [[params.features.list]]
+				pic = "feature8.png"
+				title = "Highly Available"
+				description = "Nebula Graph guarantees high availability even in case of failures."
 
-    # Portfolio modals
 	[params.portfolio.modal]
         client = "Client"
         date = "Date"

themes/creative/layouts/index.html

@@ -4,15 +4,15 @@
         {{ partial "header.html" . }}
         {{ end }}
 
-        {{ if .Site.Params.about }}
-        {{ partial "about.html" . }}
+        {{ if .Site.Params.advantage }}
+        {{ partial "advantage.html" . }}
         {{ end }}
 
-        {{ if .Site.Params.services.list }}
-        {{ partial "services.html" . }}
+        {{ if .Site.Params.features.list }}
+        {{ partial "features.html" . }}
         {{ end }}
 
-        {{ if .Site.Data.projects }}
+        <!-- {{ if .Site.Data.projects }}
         {{ partial "portfolio.html" . }}
         {{ end }}
     
@@ -24,9 +24,9 @@
         {{ partial "aside.html" . }}
         {{ end }}
     
-        {{ if .Site.Params.contact }}
+        <!-- {{ if .Site.Params.contact }}
         {{ partial "contact.html" . }}
-        {{ end }}
+        {{ end }} -->
 
         {{ if .Site.Data.projects }}
         {{ partial "modals.html" . }}

themes/creative/layouts/partials/about.html → themes/creative/layouts/partials/advantage.html

@@ -1,18 +1,18 @@
 {{ "<!-- ABOUT -->" | safeHTML }}
-<section class="bg-primary" id="about">
+<section class="bg-primary" id="advantage">
     <div class="container">
         <div class="row">
             <div class="col-lg-8 col-lg-offset-2 text-center">
-                {{ with .Site.Params.about.headline }}
+                {{ with .Site.Params.advantage.headline }}
                     <h2 class="section-heading">{{ . }}</h2>
                 {{ end }}
-                {{ if and .Site.Params.about.headline .Site.Params.about.description }}
+                {{ if and .Site.Params.advantage.headline .Site.Params.advantage.description }}
                     <hr class="light">
                 {{ end }}
-                {{ with .Site.Params.about.description }}
+                {{ with .Site.Params.advantage.description }}
                     <p class="text-faded">{{ . | markdownify }}</p>
                 {{ end }}
-                {{ with .Site.Params.about.buttonText }}
+                {{ with .Site.Params.advantage.buttonText }}
                     <a href="#" class="btn btn-default btn-xl">{{ . }}</a>
                 {{ end }}
             </div>

themes/creative/layouts/partials/services.html → themes/creative/layouts/partials/features.html

@@ -1,6 +1,6 @@
-{{ "<!-- SERVICES -->" | safeHTML }}
-<section id="services">
-    {{ with .Site.Params.services.headline }}
+{{ "<!-- features -->" | safeHTML }}
+<section id="features">
+    {{ with .Site.Params.features.headline }}
         <div class="container">
             <div class="row">
                 <div class="col-lg-12 text-center">
@@ -11,11 +11,12 @@ <h2 class="section-heading">{{ . }}</h2>
         </div>
     {{ end }}
     <div class="container">
-        <div class="row">
-            {{ range .Site.Params.services.list }}
-            <div class="col-lg-3 col-md-6 text-center">
+        <div class="feature-list">
+            {{ range .Site.Params.features.list }}
+            <div class="feature-item">
                 <div class="service-box">
-                    <i class="fa fa-4x {{ .icon }} wow bounceIn text-primary"></i>
+                    <!-- <i class="fa fa-4x {{ .icon }} wow bounceIn text-primary"></i> -->
+                    <img src="/images/{{.pic}}" width="80%" height="80%" />
                     <h3>{{ .title }}</h3>
                     {{ with .description }}
                         <p class="text-muted">{{ . }}</p>

themes/creative/layouts/partials/nav.html

@@ -32,7 +32,7 @@
                         </li>
                     {{ else }}
                         <li>
-                            <a href={{.link}}>{{.title}}</a>
+                            <a href={{.link}} target="{{.target}}">{{.title}}</a>
                         </li>
                     {{ end }}
                 <!-- {{ if and .Site.Params.about .Site.Params.navigation.links.about }}

themes/creative/static/css/custom/features.css

@@ -0,0 +1,20 @@
+.feature-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media(min-width: 768px) {
+  .feature-list .feature-item {
+    width: 25%;
+    padding: 24px;
+    text-align: center;
+  }
+}
+
+@media(max-width: 767px) {
+  .feature-item {
+    width: 50%;
+    padding: 12px;
+    text-align: center;
+  }
+}

themes/creative/static/css/custom/index.css

@@ -4,6 +4,7 @@
 @import url('./footer.css');
 @import url('./list.css');
 @import url('./single.css');
+@import url('./features.css');
 
 main {
   height: 100%;