docs(website): add git-cliff animation to the website (#404)

.dockerignore

@@ -4,7 +4,6 @@
 /npm/
 /pypi/
 /website/
-/img/
 
 # Files
 .editorconfig

README.md

@@ -1,6 +1,6 @@
 <p align="center">
     <a href="https://git-cliff.org">
-        <img src="https://raw.githubusercontent.com/orhun/git-cliff/main/img/git-cliff-logo.png" width="300"></a>
+        <img src="https://raw.githubusercontent.com/orhun/git-cliff/main/website/static/img/git-cliff-logo.png" width="300"></a>
     <br>
     <a href="https://github.com/orhun/git-cliff/releases">
         <img src="https://img.shields.io/github/v/release/orhun/git-cliff?style=flat&labelColor=1C2C2E&color=C96329&logo=GitHub&logoColor=white">
@@ -40,7 +40,7 @@
 
 **git-cliff** can generate [changelog](https://en.wikipedia.org/wiki/Changelog) files from the [Git](https://git-scm.com/) history by utilizing [conventional commits](https://git-cliff.org/docs/configuration#conventional_commits) as well as regex-powered [custom parsers](https://git-cliff.org/docs/configuration#commit_parsers). The [changelog template](https://git-cliff.org/docs/category/templating) can be customized with a [configuration file](https://git-cliff.org/docs/configuration) to match the desired format.
 
-![preview](https://raw.githubusercontent.com/orhun/git-cliff/main/img/git-cliff-preview.png)
+![animation](https://git-cliff.org/img/git-cliff-anim.gif)
 
 ## Documentation
 

website/blog/git-cliff-0.5.0.md

@@ -11,7 +11,7 @@ In this post, I'm explaining the new features in the 0.5.0 release while giving
 <center>
 
  <a href="https://github.com/orhun/git-cliff">
-    <img src="https://raw.githubusercontent.com/orhun/git-cliff/main/img/git-cliff-banner.jpg" />
+    <img src="/img/git-cliff-banner.jpg" />
 </a>
 
 </center>

website/blog/git-cliff-1.2.0.md

@@ -11,7 +11,7 @@ In this post, I'm giving a brief introduction to the new features in the 1.2.0 r
 <center>
 
  <a href="https://github.com/orhun/git-cliff">
-    <img src="https://raw.githubusercontent.com/orhun/git-cliff/main/img/git-cliff-banner.jpg" />
+    <img src="/img/git-cliff-banner.jpg" />
 </a>
 
 </center>

website/blog/git-cliff-1.3.0.md

@@ -6,11 +6,10 @@ authors: orhun
 tags:
   - release
 ---
-
 <center>
 
  <a href="https://github.com/orhun/git-cliff">
-    <img src="https://raw.githubusercontent.com/orhun/git-cliff/main/img/git-cliff-banner.jpg" />
+    <img src="/img/git-cliff-banner.jpg" />
 </a>
 
 </center>

website/blog/git-cliff-1.4.0.md

@@ -6,11 +6,10 @@ authors: orhun
 tags:
   - release
 ---
-
 <center>
 
  <a href="https://github.com/orhun/git-cliff">
-    <img src="https://raw.githubusercontent.com/orhun/git-cliff/main/img/git-cliff-banner.jpg" />
+    <img src="/img/git-cliff-banner.jpg" />
 </a>
 
 </center>

website/src/pages/index.module.css

@@ -12,6 +12,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -36,21 +37,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-bottom: 10px;
 }
 
-.titleText {
-  font-family: "A Angkanya Sebelas";
-}
-
-.titleText span:first-child {
-  color: #1c2c2e;
-}
-
-.titleText span:last-child {
-  color: #c96329;
-}
-
-.animContainer {
+.bodyContainer {
   animation: intro 1s both;
   animation-delay: 0.15s;
 }
+
+.animContainer {
+  padding: 20px;
+}

website/src/pages/index.tsx

@@ -12,21 +12,14 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <div className={styles.animContainer}>
-          <img src="/img/git-cliff.png" />
-          <h1>
-            <div className={clsx("hero__title", styles.titleText)}>
-              <span>git-</span>
-              <span>cliff</span>
-            </div>
-          </h1>
+        <div className={styles.bodyContainer}>
+          <img className={styles.animContainer} src="/img/git-cliff-anim.gif" />
           <p className="hero__subtitle">{siteConfig.tagline}</p>
           <div className={styles.buttons}>
             <Link className="button button--secondary button--lg" to="/docs/">
               Get Started
             </Link>
           </div>
-          <img src="/img/demo.png" />
         </div>
       </div>
     </header>