add gif demo in landing page

Author: gaplo917

README.md

@@ -46,6 +46,10 @@ You should feel comfortable if you use 'Monokai' or 'Darcular' theme previously.
 
 # Learn More About GapStyle
 
+### How GapStyle improves productivity?
+
+![semnatic-highlight-information-intellij](preview/semnatic-highlight-information-intellij.gif)
+
 - [GapStyle Specification](spec/README.md#gapstyle-specification)
   - [Semantic Highlighting Optimized](spec/README.md#semantic-highlighting-optimized)
   - [Recommended Font](spec/README.md#recommended-font)

spec/README.md

@@ -46,7 +46,7 @@ highlighting well.
 In contrast, GapStyle is giving different semantic a unique distinct colors and font
 style. Here is the result :
 
-![semnatic-highlight-information-intellij](preview/semnatic-highlight-information-intellij.gif)
+![semnatic-highlight-information-intellij](../preview/semnatic-highlight-information-intellij.gif)
 
 From my experience, GapStyle helps to improve my reading and writing code speed by: