From c0414ab732c99113893e3cf8669b3b3c67f48c69 Mon Sep 17 00:00:00 2001
From: Pulkit Kathuria <kevincobain2000@gmail.com>
Date: Mon, 1 Jan 2024 22:07:49 +0900
Subject: [PATCH] (ui) examples

---
 README.md                                 | 11 +++---
 frontend/src/components/Compare.astro     | 47 +++++++++++++++++++++++
 frontend/src/components/Hero.astro        |  9 +++++
 frontend/src/components/Nav.astro         |  4 +-
 frontend/src/components/RadarChart.astro  |  4 +-
 frontend/src/components/SelfHosting.astro |  4 +-
 frontend/src/pages/index.astro            |  2 +
 7 files changed, 70 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/Compare.astro

diff --git a/README.md b/README.md
index 310bcde..95dd021 100644
--- a/README.md
+++ b/README.md
@@ -210,17 +210,17 @@ https://instachart.coveritup.app/radar?title=Radar+Chart&data={
 | `values` | ◯        | Array (int)    |
 
 ```sh
-https://instachart.coveritup.app/funnel?title=Radar+Chart&data={
-    "names": ["Mon","Tue", "Wed", "Sat"],
-    "values": [2,1,4,6]
+https://instachart.coveritup.app/funnel?title=Radar+Chart&width=500&data={
+    "names": ["Mon","Tue", "Thu", "Fri", "Sat", "Sun"],
+    "values": [100,80,60,40,20,10]
 }
 ```
 
 <br>
 
 <p align="center">
-  <a href='https://instachart.coveritup.app/funnel?title=Funnel+Chart&width=520&subtitle=Sleeping+Hours&data={%20"names":%20["Mon","Tue",%20"Wed",%20"Sat"],%20"values":%20[2,1,4,6]%20}'>
-    <img alt="funnel chart" src='https://instachart.coveritup.app/funnel?title=Funnel+Chart&width=520&subtitle=Sleeping+Hours&data={%20"names":%20["Mon","Tue",%20"Wed",%20"Sat"],%20"values":%20[2,1,4,6]%20}'>
+  <a href='https://instachart.coveritup.app/funnel?title=Radar+Chart&width=620&data={%20%22names%22:%20[%22Mon%22,%22Tue%22,%20%22Thu%22,%20%22Fri%22,%20%22Sat%22,%20%22Sun%22],%20%22values%22:%20[100,80,60,40,20,10]%20}'>
+    <img alt="funnel chart" src='https://instachart.coveritup.app/funnel?title=Radar+Chart&width=620&data={%20%22names%22:%20[%22Mon%22,%22Tue%22,%20%22Thu%22,%20%22Fri%22,%20%22Sat%22,%20%22Sun%22],%20%22values%22:%20[100,80,60,40,20,10]%20}'>
   </a>
 </p>
 
@@ -260,3 +260,4 @@ curl -sLk https://raw.githubusercontent.com/kevincobain2000/instachart/master/in
 - **v1.0.2** - `funnel` charts and `table` as image.
 - **v1.0.3** - Fixes a few padding issues.
 - **v1.0.4** - Adds `/` for frontend. And Installation instructions for self-hosting.
+- **v1.0.5** - Frontend page with examples.
diff --git a/frontend/src/components/Compare.astro b/frontend/src/components/Compare.astro
new file mode 100644
index 0000000..1943475
--- /dev/null
+++ b/frontend/src/components/Compare.astro
@@ -0,0 +1,47 @@
+---
+
+---
+
+<!--Main-->
+<div
+  class="container pt-24 md:pt-36 mx-auto flex flex-wrap flex-col md:flex-row items-center"
+>
+  <!--Left Col-->
+  <div
+    class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden"
+  >
+    <h1
+      class="my-4 text-3xl md:text-5xl text-white opacity-75 font-bold leading-tight text-center md:text-left"
+    >
+      Compare with
+      <span
+        class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500"
+      >
+        other services - free plans
+      </span>
+    </h1>
+
+    <div
+      class="bg-gray-900 opacity-75 w-full shadow-lg rounded-lg px-8 pt-6 pb-6 overflow-auto no-scrollbar"
+    >
+      <div class="mb-4">
+        <b>Image-Charts:</b> Quota 60 charts per minute
+        <br>
+        <b class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">InstaChart:</b> <b class="text-slate-100">Free</b>
+        <br><br>
+        <b>QuickChart:</b> Rate limits enforced
+        <br>
+        <b class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">InstaChart:</b> <b class="text-slate-100">Free</b>
+      </div>
+    </div>
+  </div>
+
+  <!--Right Col-->
+  <div class="w-full xl:w-3/5 pt-5 overflow-hidden">
+    <img
+      class="mx-auto w-full md:w-4/5"
+      src="https://instachart.coveritup.app/bar?title=Performance+200RPS&horizontal=true&metric=secs%20&theme=dark&subtitle=Response+Time&data={%20%22x%22:%20[%22Total%22,%20%22Fastest%22,%20%22Average%22],%20%22y%22:%20[[3,0.27,0.7]]%20}"
+    />
+  </div>
+</div>
+<style></style>
diff --git a/frontend/src/components/Hero.astro b/frontend/src/components/Hero.astro
index ba7e34e..3c85c75 100644
--- a/frontend/src/components/Hero.astro
+++ b/frontend/src/components/Hero.astro
@@ -44,6 +44,15 @@
           impactful visuals!
         </p>
       </div>
+      <div class="flex items-center justify-between pt-4">
+        <a
+          class="bg-gradient-to-t from-green-800 to-green-500 hover:from-green-500 hover:to-green-500 text-white font-bold py-2 px-4 rounded focus:ring transform transition hover:scale-105 duration-300 ease-in-out"
+          type="button"
+          href="https://github.com/kevincobain2000/instachart"
+        >
+          Read docs
+        </a>
+      </div>
     </div>
   </div>
 
diff --git a/frontend/src/components/Nav.astro b/frontend/src/components/Nav.astro
index e7591c0..165e393 100644
--- a/frontend/src/components/Nav.astro
+++ b/frontend/src/components/Nav.astro
@@ -6,8 +6,8 @@ import medium from '@assets/medium.svg?raw'
 <div class="w-full container mx-auto">
     <div class="w-full flex items-center justify-between">
 
-      <a class="flex items-center text-indigo-400 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="/">
-        <img src="/favicon.ico" alt="" width="30">
+      <a class="flex items-center text-indigo-400 no-underline hover:no-underline font-bold text-3xl" href="/">
+        <img src="/favicon.ico" alt="" width="25">
         Insta<span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">Chart</span>
       </a>
 
diff --git a/frontend/src/components/RadarChart.astro b/frontend/src/components/RadarChart.astro
index dcee81d..495fdba 100644
--- a/frontend/src/components/RadarChart.astro
+++ b/frontend/src/components/RadarChart.astro
@@ -49,8 +49,8 @@ https://instachart.coveritup.app/radar?title=Radar
   <!--Right Col-->
   <div class="w-full xl:w-3/5 pt-5 overflow-hidden">
     <img
-      class="mx-auto w-full md:w-4/5 transform transition duration-700 ease-in-out"
-      src="https://instachart.coveritup.app/radar?title=Radar+Chart&height=520&data={%20%22names%22:%20[%22Mon%22,%22Tue%22,%20%22Wed%22,%20%22Fri%22],%20%22labels%22:%20[%22Work%22,%20%22Relax%22,%20%22Travel%22],%20%22values%22:%20[[1,2,3,4],%20[15,7,8,9],%20[15,17,5,7]]%20}&theme=dark"
+      class="mx-auto w-full md:w-4/5"
+      src="https://instachart.coveritup.app/radar?title=Radar+Chart&height=660&data={%20%22names%22:%20[%22Mon%22,%22Tue%22,%20%22Wed%22,%20%22Fri%22],%20%22labels%22:%20[%22Work%22,%20%22Relax%22,%20%22Travel%22],%20%22values%22:%20[[1,2,3,4],%20[15,7,8,9],%20[15,17,5,7]]%20}&theme=dark"
     />
   </div>
 </div>
diff --git a/frontend/src/components/SelfHosting.astro b/frontend/src/components/SelfHosting.astro
index c84100d..056c5a1 100644
--- a/frontend/src/components/SelfHosting.astro
+++ b/frontend/src/components/SelfHosting.astro
@@ -12,11 +12,11 @@ import octocat from "@assets/octocat.svg?raw";
     <h1
       class="my-4 text-3xl md:text-5xl text-white opacity-75 font-bold leading-tight text-center md:text-left"
     >
-      Free cloud
+      Free!
       <span
         class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500"
       >
-        And
+        With
       </span>
        Self Hosted Options.
     </h1>
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 38dfc14..b27d59d 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -7,6 +7,7 @@ import Hero from "@components/Hero.astro";
 import BarChart from "@components/BarChart.astro";
 import RadarChart from "@components/RadarChart.astro";
 import SelfHosting from "@components/SelfHosting.astro";
+import Compare from "@components/Compare.astro";
 import PieChart from "@components/PieChart.astro";
 import Footer from "@components/Footer.astro";
 ---
@@ -25,6 +26,7 @@ import Footer from "@components/Footer.astro";
     <PieChart />
     <RadarChart />
     <SelfHosting />
+    <Compare />
     <Footer />
   </div>
 </Layout>