(ui) article added

app/frontend/src/components/Article.astro

@@ -0,0 +1,91 @@
+---
+
+---
+
+<div class="mx-auto md:pt-16">
+  <p class="text-violet-400 font-bold pb-6 lg:pb-6 text-center text-3xl">
+    <br />What is <br />
+    CoverItUp?
+  </p>
+  <p class="text-center font-mono text-lg text-white font-bold">
+    All in One Developer's KPI Tool
+  </p>
+
+  <div
+    class="text-justify md:pl-48 md:pr-48 pl-5 pr-5 pt-10 pb-10 text-slate-400 bg-slate-800 mt-5 rounded-lg"
+  >
+    <b>CoverItUp</b> - is a new, one of it's kind, complete solution for software
+    engineers to measure code metrics.
+    <br />
+    <br />
+    <span class="text-white">
+        This tool empowers developers to take control of their code coverage analysis
+    for any type of matrices, all in one place.
+    </span>
+    <br />
+    <br />
+    This tool is fully customizable tool to track metrics that should matter to you
+    the most. Such as, not just the code coverage, but equally important other metrics.
+    Such as ・build times ・number of dependencies ・bundle sizes etc. Together with
+    additional features, which I share further in this post.
+    <br />
+    <br />
+    <b>Context:</b> mostly all repos use services like CodeCov, Coveralls badges
+    to display the code-coverage of unit tests on their README on Github. Over years,
+    many other badges, such ・as number of downloads ・number of people online on
+    Discord etc also made their way into the README.
+    <br />
+    <br />
+    However, there are other indicators that are equally important. And developers
+    have less control as developers are mostly restricted to the tools that are available
+    right now to record those metrics.
+    <br />
+    Therefore, I designed this tool in such a way, that developers can record any
+    types of scores that they see fit.
+    <br />
+    <br />
+
+    <br />
+    <span>
+      Generally for any software project, we use tools like SonarQube for code
+      inspection, CodeCov for code coverage, Code Climate for smells and others.
+      <br />
+      For enterprise users, this also means expensive licenses and managing several
+      self hosting. Therefore, some may consider is as a free alternative to CodeCov
+      or SonarQube.
+      <br />
+      And for users, using the cloud services for these respective tools, involves
+      managing separate accounts, authentications etc.
+      <br />
+      <br />
+
+      All these tools provide solutions to one or two metrics. Hence, users end
+      up using multiple services for different use cases in same project.
+      <br />
+      <br />
+
+      We didn’t want to do either. Instead, provide full control to developer
+      with the choice of indicator a developer wants to measure.
+    </span>
+
+    Over my years of development, I have realized that just badges may not be
+    enough to determine the trajectory of a repository. Therefore, I implemented
+    trend charts that can be embedded inside the README as images, same way we
+    embed badges.
+    <br /><br />
+    On top of the core feature to track code wellness, the tool provides badges and
+    charts that can be embed into the README. It also provides smart feedback to
+    user on pull requests by sharing difference in the indicators for 2 branches.
+    The tool doesn’t spam the comment box, and upon new commits filters out the diff
+    that have already been commented.
+    <br /><br />
+
+    It comes in dark and light themes. The embedding of charts come in 2
+    different themes. The width and heights are fully adjustable and output can
+    be either png or svg if you prefer smaller sizes. SVG are best suited to
+    embed in the README or pull request comments. While PNG are used if you want
+    to create your own dashboards on a Wiki or Confluence page for all the
+    repositories in an organization.
+  </div>
+</div>
+<style></style>

app/frontend/src/components/Hero.astro

@@ -23,7 +23,7 @@
       </span>
     </h1>
     <p
-      class="leading-normal text-base md:text-2xl mb-8 text-center md:text-left"
+      class="leading-normal text-base md:text-2xl mb-8 text-center md:text-left font-mono"
     >
       Record what matters.
     </p>

app/frontend/src/components/Layout.astro

@@ -68,7 +68,7 @@ const { title, description } = Astro.props;
   .bg-gradient {
     background: #780206;
     background: -webkit-linear-gradient(to right, #061161, #780206);
-    background: linear-gradient(to right, #061161, #780206);
+    background: linear-gradient(to right, #0f1024, #3b384f);
   }
   /* Hide scrollbar for Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {

app/frontend/src/components/LineChart.astro

@@ -34,7 +34,7 @@
           <pre
             class="">{`
 - uses: kevincobain2000/action-coveritup@v2
-    with:
+  with:
     type: go-build-time
     command: go build main.go
     record: runtime`}</pre>

app/frontend/src/components/Themes.astro

@@ -8,27 +8,28 @@
     & <br />
     Github Enterprise
   </p>
-  <p class="text-center">Instant feedback on your code changes.</p>
+  <p class="text-center font-mono text-lg">Instant feedback on your code changes.</p>
 
-  <p class="text-center font-bold pt-5 pb-5 text-white">
+  <p class="text-center pt-5 pb-5 text-white">
     Supports all languages and frameworks
   </p>
   <p class="text-center font-bold pt-5 pb-5 text-white">
     <a
-      class="text-blue-400 hover:text-blue-600"
+    class="text-blue-400 hover:text-blue-600"
       type="button"
-      href="https://medium.com/@kevincobain2000-x/revolutionizing-code-tracking-for-developers-e8b7b42a5204"
+      href="https://medium.com/web-developer/you-are-using-lint-wrong-c0ccfe58e628"
     >
-      Medium: Revolutionizing code tracking for developers
+      Medium: How to use lint the right way
     </a>
     <br>
     <a
-    class="text-blue-400 hover:text-blue-600"
+      class="text-blue-400 hover:text-blue-600 mt-3"
       type="button"
-      href="https://medium.com/web-developer/you-are-using-lint-wrong-c0ccfe58e628"
+      href="https://medium.com/@kevincobain2000-x/revolutionizing-code-tracking-for-developers-e8b7b42a5204"
     >
-      Medium: How to use lint the right way
+      Medium: Revolutionizing code tracking for developers
     </a>
+
   </p>
 </div>
 <style></style>

app/frontend/src/pages/index.astro

@@ -4,6 +4,7 @@ import Nav from "@components/Nav.astro";
 import LineChart from "@components/LineChart.astro";
 import Themes from "@components/Themes.astro";
 import Hero from "@components/Hero.astro";
+import Article from "@components/Article.astro";
 import BarChart from "@components/BarChart.astro";
 import SelfHosting from "@components/SelfHosting.astro";
 import FinalAction from "@components/FinalAction.astro";
@@ -23,6 +24,7 @@ import Footer from "@components/Footer.astro";
     <Nav />
 
     <Hero />
+    <Article />
     <Themes />
     <LineChart />
     <BarChart />