From 72bd02f9845eb594288a129fa28bdd723336861d Mon Sep 17 00:00:00 2001
From: Wang Haoyang <haoyangw@gmail.com>
Date: Wed, 13 Nov 2024 11:28:56 +0800
Subject: [PATCH 1/3] Improve landing page more -Change the Why you can trust
 Jippy section to render reasons as Cards like the rest of the page -Hopefully
 this looks more aesthetic -Also adjust the font size of the heaer of the
 Pricing section

---
 frontend/app/landing.tsx | 60 ++++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/frontend/app/landing.tsx b/frontend/app/landing.tsx
index 4708bbec..a4625091 100644
--- a/frontend/app/landing.tsx
+++ b/frontend/app/landing.tsx
@@ -286,38 +286,50 @@ const Landing = () => {
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row bg-background w-full px-8 py-12 md:px-12 lg:py-24 lg:px-24 md:gap-x-24">
-          <div className="flex flex-col flex-1 gap-y-8 md:basis-5/12 w-full md:w-fit items-center md:items-start">
-            <h1 className="text-5xl tracking-tight leading-tight text-primary font-bold text-center md:text-left">
-              Why you can trust Jippy
+        <div className="flex flex-col bg-background w-full px-8 py-12 md:px-12 lg:py-24 lg:px-24 md:gap-x-24">
+          <div className="flex flex-col flex-1 gap-y-8 w-full items-center">
+            <h1 className="text-5xl tracking-tight leading-tight text-primary font-bold text-center">
+              Why you can trust Jippy AI <Wand2 className="inline w-8 h-8 ml-3 hover:animate-wiggle-more text-text-muted" />
             </h1>
-            <span className="text-xl md:text-2xl lg:text-3xl flex items-center">
-              <Wand2 className="inline-flex mr-3 hover:animate-wiggle-more text-text-muted" />
-              Learn how Jippy AI works
+            <span className="text-xl md:text-2xl lg:text-3xl text-center w-9/12">
+              Jippy is just an AI frog after all and can make mistakes, but
+              measures are in place to minimise mistakes
+              or alert you to issues as much as possible
             </span>
           </div>
 
-          <div className="flex-1 md:basis-7/12 p-12 mt-10 md:mt-0 bg-background border rounded-lg shadow-lg">
-            <p className="text-xl md:text-2xl lg:text-3xl text-text">
-              Jippy is after all just an AI frog, and can make mistakes, but
-              here are some things made sure to train Jippy on to avoid mistakes
-              (or alert you to them) as much as possible:
-            </p>
-            <ul className="flex flex-col gap-y-4 mt-4 text-lg md:text-xl">
-              <li>
-                Jippy will alert you when Jippy is unsure of something and
-                provide fall-backs instead during essay generation.
-              </li>
-              <li>
-                Jippy is trained on a set of real current affairs news data set.
-                We currently have 18k articles in our dataset.
-              </li>
-            </ul>
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] w-full h-fit items-stretch gap-x-5 gap-y-3 mt-10">
+            <Card
+              className="m-1 drop-shadow-sm shadow-background-50 px-4 py-3"
+            >
+              <CardHeader>
+                <CardTitle className="text-primary-800 text-xl md:text-2xl lg:text-3xl">
+                  Alerts
+                </CardTitle>
+                <CardDescription className="md:text-xl text-text-muted pt-3">
+                  Jippy will alert you when Jippy is unsure of something and
+                  provide fall-backs instead during essay generation.
+                </CardDescription>
+              </CardHeader>
+            </Card>
+            <Card
+              className="m-1 drop-shadow-sm shadow-background-50 px-4 py-3"
+            >
+              <CardHeader>
+                <CardTitle className="text-primary-800 text-xl md:text-2xl lg:text-3xl">
+                  Credible news
+                </CardTitle>
+                <CardDescription className="md:text-xl text-text-muted pt-3">
+                  Jippy is trained on real current affairs news from a reliable source,
+                  with more than 18k articles and counting.
+                </CardDescription>
+              </CardHeader>
+            </Card>
           </div>
         </div>
 
         <div className="flex flex-col items-center justify-center bg-background w-full py-16 md:py-24 px-8 md:px-24 place-items-start">
-          <h1 className="text-5xl font-bold text-primary">Plans & pricing</h1>
+          <h1 className="text-3xl md:text-5xl font-bold text-primary">Plans & pricing</h1>
           <h2 className="text-xl md:text-2xl lg:text-3xl text-text-muted mt-8">
             We strive to keep Jippy accessible for everyone.
           </h2>

From ddec5c633acbac2f570915a2154fc77aad2929f7 Mon Sep 17 00:00:00 2001
From: Wang Haoyang <haoyangw@gmail.com>
Date: Wed, 13 Nov 2024 11:41:42 +0800
Subject: [PATCH 2/3] Fix icon alignment -Vertically centre the wand icon in
 the Jippy AI section of the landing page

---
 frontend/app/landing.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/app/landing.tsx b/frontend/app/landing.tsx
index a4625091..8dab96b2 100644
--- a/frontend/app/landing.tsx
+++ b/frontend/app/landing.tsx
@@ -288,9 +288,12 @@ const Landing = () => {
 
         <div className="flex flex-col bg-background w-full px-8 py-12 md:px-12 lg:py-24 lg:px-24 md:gap-x-24">
           <div className="flex flex-col flex-1 gap-y-8 w-full items-center">
-            <h1 className="text-5xl tracking-tight leading-tight text-primary font-bold text-center">
-              Why you can trust Jippy AI <Wand2 className="inline w-8 h-8 ml-3 hover:animate-wiggle-more text-text-muted" />
-            </h1>
+            <div className="text-3xl md:text-5xl tracking-tight leading-tight text-primary font-bold text-center">
+              Why you can trust Jippy AI
+              <span className="relative inline-block ml-1 lg:ml-2">
+                <Wand2 className="w-5 h-5 md:w-8 md:h-8 ml-2 hover:animate-wiggle-more text-text-muted" />
+              </span>
+            </div>
             <span className="text-xl md:text-2xl lg:text-3xl text-center w-9/12">
               Jippy is just an AI frog after all and can make mistakes, but
               measures are in place to minimise mistakes

From 0739f34c701de6375c797458ef0ccfa75161a7cb Mon Sep 17 00:00:00 2001
From: Wang Haoyang <haoyangw@gmail.com>
Date: Wed, 13 Nov 2024 11:42:08 +0800
Subject: [PATCH 3/3] Format frontend with eslint

---
 frontend/app/landing.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/app/landing.tsx b/frontend/app/landing.tsx
index 8dab96b2..f242236f 100644
--- a/frontend/app/landing.tsx
+++ b/frontend/app/landing.tsx
@@ -296,15 +296,13 @@ const Landing = () => {
             </div>
             <span className="text-xl md:text-2xl lg:text-3xl text-center w-9/12">
               Jippy is just an AI frog after all and can make mistakes, but
-              measures are in place to minimise mistakes
-              or alert you to issues as much as possible
+              measures are in place to minimise mistakes or alert you to issues
+              as much as possible
             </span>
           </div>
 
           <div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] w-full h-fit items-stretch gap-x-5 gap-y-3 mt-10">
-            <Card
-              className="m-1 drop-shadow-sm shadow-background-50 px-4 py-3"
-            >
+            <Card className="m-1 drop-shadow-sm shadow-background-50 px-4 py-3">
               <CardHeader>
                 <CardTitle className="text-primary-800 text-xl md:text-2xl lg:text-3xl">
                   Alerts
@@ -315,16 +313,14 @@ const Landing = () => {
                 </CardDescription>
               </CardHeader>
             </Card>
-            <Card
-              className="m-1 drop-shadow-sm shadow-background-50 px-4 py-3"
-            >
+            <Card className="m-1 drop-shadow-sm shadow-background-50 px-4 py-3">
               <CardHeader>
                 <CardTitle className="text-primary-800 text-xl md:text-2xl lg:text-3xl">
                   Credible news
                 </CardTitle>
                 <CardDescription className="md:text-xl text-text-muted pt-3">
-                  Jippy is trained on real current affairs news from a reliable source,
-                  with more than 18k articles and counting.
+                  Jippy is trained on real current affairs news from a reliable
+                  source, with more than 18k articles and counting.
                 </CardDescription>
               </CardHeader>
             </Card>
@@ -332,7 +328,9 @@ const Landing = () => {
         </div>
 
         <div className="flex flex-col items-center justify-center bg-background w-full py-16 md:py-24 px-8 md:px-24 place-items-start">
-          <h1 className="text-3xl md:text-5xl font-bold text-primary">Plans & pricing</h1>
+          <h1 className="text-3xl md:text-5xl font-bold text-primary">
+            Plans & pricing
+          </h1>
           <h2 className="text-xl md:text-2xl lg:text-3xl text-text-muted mt-8">
             We strive to keep Jippy accessible for everyone.
           </h2>