From 845c55ec9a006eb70f043e3062bc9a9d4a1437ec Mon Sep 17 00:00:00 2001
From: jasangill1 <56135840+jasangill1@users.noreply.github.com>
Date: Wed, 12 Jul 2023 22:04:42 -0700
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20Hero=20Banner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next/src/components/HeroTimeBanner.tsx | 43 ++++++++++++++++++++++++++
 next/src/components/landing/Hero.tsx   | 16 +++++++---
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 next/src/components/HeroTimeBanner.tsx

diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
new file mode 100644
index 0000000000..7be6db8dbb
--- /dev/null
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import Button from "../ui/button";
+import type { ReactNode } from "react";
+import React from "react";
+
+type HeroTimeBannerProps = {
+  title: string;
+  subtitle: string;
+  leftIcon: ReactNode;
+  rightIcon: ReactNode;
+  onClick?: () => void;
+};
+
+const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
+  title,
+  subtitle,
+  leftIcon,
+  rightIcon,
+  onClick,
+}) => {
+  return (
+    <button
+      className={clsx(
+        "flex flex-col items-center justify-center rounded-full bg-black p-4",
+        "max-h-sm max-w-md shadow-md transition duration-200 ease-in-out",
+        "hover:shadow-lg",
+        "border-[1px] border-black border-opacity-20",
+        "animate-border-pulse",
+        "transition duration-200 ease-in-out hover:bg-white/90 focus-visible:bg-white/90 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/30"
+      )}
+      onClick={onClick}
+    >
+      <div className="left-align mb-2 flex items-center justify-center">
+        {leftIcon}
+        <h2 className="ml-2 text-xl font-bold">{title}</h2>
+        {rightIcon}
+      </div>
+      <p className="mb-4 text-sm text-gray-600">{subtitle}</p>
+    </button>
+  );
+};
+
+export default HeroTimeBanner;
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
index 2a75cb3d06..321153793d 100644
--- a/next/src/components/landing/Hero.tsx
+++ b/next/src/components/landing/Hero.tsx
@@ -3,14 +3,13 @@ import BannerBadge from "../BannerBadge";
 import clsx from "clsx";
 import PrimaryButton from "../PrimaryButton";
 import TextButton from "../TextButton";
-import Backing from "./Backing";
 import React from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import { FaChevronRight } from "react-icons/fa";
-import FooterLinks from "./FooterLinks";
+import HeroTimeBanner from "../HeroTimeBanner";
 
-const Hero = () => {
+const Hero: React.FC = () => {
   const router = useRouter();
 
   return (
@@ -48,11 +47,20 @@ const Hero = () => {
                   "from-white via-white via-50% to-neutral-600"
                 )}
               >
-                Create and deploy AI agents in the web in seconds. Simply give them a name and goal.
+                Create and deploy AI agents on the web in seconds. Simply give them a name and goal.
                 Then experience a new way to accomplish any objective.
               </p>
             </div>
           </div>
+          <HeroTimeBanner
+            title="Start your journey with AI agents"
+            subtitle="Explore our platform and create your own AI agents today."
+            leftIcon={<FaChevronRight size="12" />}
+            rightIconIcon={<FaChevronRight size="12" />}
+            onClick={() => {
+              router.push("/").catch(console.error);
+            }}
+          />
           <div className="flex flex-col items-center justify-center gap-4 gap-x-5 md:flex-row md:justify-start">
             <PrimaryButton
               icon={<Image src="email-24x24.svg" width="24" height="24" alt="Email" />}

From 6577c808dc871237ae98db370d155fc01aee4464 Mon Sep 17 00:00:00 2001
From: jasangill1 <56135840+jasangill1@users.noreply.github.com>
Date: Wed, 12 Jul 2023 22:24:05 -0700
Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=A8=20Applied=20flex=20for=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next/src/components/HeroTimeBanner.tsx | 23 +++++++++++------------
 next/src/components/landing/Hero.tsx   |  8 ++++----
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
index 7be6db8dbb..5a9cb44ac3 100644
--- a/next/src/components/HeroTimeBanner.tsx
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import Button from "../ui/button";
 import type { ReactNode } from "react";
 import React from "react";
 
@@ -19,24 +18,24 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
   onClick,
 }) => {
   return (
-    <button
+    <div
       className={clsx(
-        "flex flex-col items-center justify-center rounded-full bg-black p-4",
-        "max-h-sm max-w-md shadow-md transition duration-200 ease-in-out",
-        "hover:shadow-lg",
+        "flex flex-col items-start justify-center bg-black p-4",
+        "max-h-sm max-w-md shadow-md transition duration-200",
         "border-[1px] border-black border-opacity-20",
         "animate-border-pulse",
-        "transition duration-200 ease-in-out hover:bg-white/90 focus-visible:bg-white/90 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/30"
+        "cursor-pointer"
       )}
-      onClick={onClick}
     >
-      <div className="left-align mb-2 flex items-center justify-center">
+      <div className="mb-2 flex  flex-row items-center justify-start">
         {leftIcon}
-        <h2 className="ml-2 text-xl font-bold">{title}</h2>
-        {rightIcon}
+        <div className="flex flex-row">
+          <h2 className="text-md ml-2s font-bold">{title}</h2>
+          <p className="mb-4 text-sm text-gray-600">{subtitle}</p>
+        </div>
+        <div className="flex justify-end">{rightIcon}</div>
       </div>
-      <p className="mb-4 text-sm text-gray-600">{subtitle}</p>
-    </button>
+    </div>
   );
 };
 
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
index 321153793d..bd8a59d3a9 100644
--- a/next/src/components/landing/Hero.tsx
+++ b/next/src/components/landing/Hero.tsx
@@ -53,10 +53,10 @@ const Hero: React.FC = () => {
             </div>
           </div>
           <HeroTimeBanner
-            title="Start your journey with AI agents"
-            subtitle="Explore our platform and create your own AI agents today."
-            leftIcon={<FaChevronRight size="12" />}
-            rightIconIcon={<FaChevronRight size="12" />}
+            title="Platformer"
+            subtitle="A Platformer game builder"
+            leftIcon={<FaChevronRight size="24" />}
+            rightIcon={<FaChevronRight size="24" />}
             onClick={() => {
               router.push("/").catch(console.error);
             }}

From f1c1aa30927ef0aebd84eed8d9e4339b05b4bcaf Mon Sep 17 00:00:00 2001
From: jasangill1 <56135840+jasangill1@users.noreply.github.com>
Date: Wed, 12 Jul 2023 22:25:51 -0700
Subject: [PATCH 3/8] =?UTF-8?q?=E2=9C=A8=20Format?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next/src/components/HeroTimeBanner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
index 5a9cb44ac3..6d57c0afe7 100644
--- a/next/src/components/HeroTimeBanner.tsx
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -27,7 +27,7 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
         "cursor-pointer"
       )}
     >
-      <div className="mb-2 flex  flex-row items-center justify-start">
+      <div className="mb-2 flex flex-row items-center justify-start">
         {leftIcon}
         <div className="flex flex-row">
           <h2 className="text-md ml-2s font-bold">{title}</h2>

From b24c095495696fb93ea1cb839c4d68af6d964821 Mon Sep 17 00:00:00 2001
From: jasangill1 <56135840+jasangill1@users.noreply.github.com>
Date: Wed, 12 Jul 2023 22:51:31 -0700
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=A6=B4=20Skeleton=20on=20banner=20but?=
 =?UTF-8?q?ton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next/src/components/HeroTimeBanner.tsx | 14 ++++++++------
 next/src/components/landing/Hero.tsx   |  4 ++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
index 6d57c0afe7..75360fd4f6 100644
--- a/next/src/components/HeroTimeBanner.tsx
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -21,19 +21,21 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
     <div
       className={clsx(
         "flex flex-col items-start justify-center bg-black p-4",
-        "max-h-sm max-w-md shadow-md transition duration-200",
-        "border-[1px] border-black border-opacity-20",
-        "animate-border-pulse",
+        "max-h-sm  rounded-full shadow-md",
+        "max-w-xs border-[1px] border-black border-opacity-20",
+        "animate-border-pulse bg-clip-text text-transparent",
+        "bg-gradient-to-r from-white to-transparent",
+
         "cursor-pointer"
       )}
     >
       <div className="mb-2 flex flex-row items-center justify-start">
-        {leftIcon}
-        <div className="flex flex-row">
+        <div className="p-4 text-white">{leftIcon}</div>
+        <div className="flex flex-col">
           <h2 className="text-md ml-2s font-bold">{title}</h2>
           <p className="mb-4 text-sm text-gray-600">{subtitle}</p>
         </div>
-        <div className="flex justify-end">{rightIcon}</div>
+        <div className="flex justify-end p-4 text-white">{rightIcon}</div>
       </div>
     </div>
   );
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
index bd8a59d3a9..9350b0c2f8 100644
--- a/next/src/components/landing/Hero.tsx
+++ b/next/src/components/landing/Hero.tsx
@@ -55,8 +55,8 @@ const Hero: React.FC = () => {
           <HeroTimeBanner
             title="Platformer"
             subtitle="A Platformer game builder"
-            leftIcon={<FaChevronRight size="24" />}
-            rightIcon={<FaChevronRight size="24" />}
+            leftIcon={<FaChevronRight size="12" />}
+            rightIcon={<FaChevronRight size="12" />}
             onClick={() => {
               router.push("/").catch(console.error);
             }}

From a8d46c59fb77d48d1c10ed8efb5c6b77340f8fb0 Mon Sep 17 00:00:00 2001
From: jasangill1 <56135840+jasangill1@users.noreply.github.com>
Date: Wed, 12 Jul 2023 23:34:03 -0700
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9C=A8=20Formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next/src/components/HeroTimeBanner.tsx | 5 ++---
 next/src/components/landing/Hero.tsx   | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
index 75360fd4f6..b47104fee8 100644
--- a/next/src/components/HeroTimeBanner.tsx
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -21,11 +21,10 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
     <div
       className={clsx(
         "flex flex-col items-start justify-center bg-black p-4",
-        "max-h-sm  rounded-full shadow-md",
-        "max-w-xs border-[1px] border-black border-opacity-20",
+        "max-h-xs rounded-full shadow-md",
+        "max-w-[293px] border-[1px] border-black border-opacity-20",
         "animate-border-pulse bg-clip-text text-transparent",
         "bg-gradient-to-r from-white to-transparent",
-
         "cursor-pointer"
       )}
     >
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
index 9350b0c2f8..331c6b2e77 100644
--- a/next/src/components/landing/Hero.tsx
+++ b/next/src/components/landing/Hero.tsx
@@ -6,7 +6,7 @@ import TextButton from "../TextButton";
 import React from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import { FaChevronRight } from "react-icons/fa";
+import { FaCalculator, FaChevronRight } from "react-icons/fa";
 import HeroTimeBanner from "../HeroTimeBanner";
 
 const Hero: React.FC = () => {
@@ -55,8 +55,8 @@ const Hero: React.FC = () => {
           <HeroTimeBanner
             title="Platformer"
             subtitle="A Platformer game builder"
-            leftIcon={<FaChevronRight size="12" />}
-            rightIcon={<FaChevronRight size="12" />}
+            leftIcon={<FaCalculator size="24" />}
+            rightIcon={<FaCalculator size="24" />}
             onClick={() => {
               router.push("/").catch(console.error);
             }}

From 02818f496c8d865c265100229abe5c45fc723315 Mon Sep 17 00:00:00 2001
From: jasangill1 <56135840+jasangill1@users.noreply.github.com>
Date: Wed, 12 Jul 2023 23:40:35 -0700
Subject: [PATCH 6/8] =?UTF-8?q?=E2=9C=A8=20Better=20Formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next/src/components/HeroTimeBanner.tsx | 6 +++---
 next/src/components/landing/Hero.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
index b47104fee8..9fdf3b3cc6 100644
--- a/next/src/components/HeroTimeBanner.tsx
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -21,8 +21,8 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
     <div
       className={clsx(
         "flex flex-col items-start justify-center bg-black p-4",
-        "max-h-xs rounded-full shadow-md",
-        "max-w-[293px] border-[1px] border-black border-opacity-20",
+        "max-h-min rounded-full shadow-md",
+        "max-w-xs border-[1px] border-black border-opacity-20",
         "animate-border-pulse bg-clip-text text-transparent",
         "bg-gradient-to-r from-white to-transparent",
         "cursor-pointer"
@@ -32,7 +32,7 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
         <div className="p-4 text-white">{leftIcon}</div>
         <div className="flex flex-col">
           <h2 className="text-md ml-2s font-bold">{title}</h2>
-          <p className="mb-4 text-sm text-gray-600">{subtitle}</p>
+          <p className="text-sm text-gray-600">{subtitle}</p>
         </div>
         <div className="flex justify-end p-4 text-white">{rightIcon}</div>
       </div>
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
index 331c6b2e77..9c28bb1d48 100644
--- a/next/src/components/landing/Hero.tsx
+++ b/next/src/components/landing/Hero.tsx
@@ -55,8 +55,8 @@ const Hero: React.FC = () => {
           <HeroTimeBanner
             title="Platformer"
             subtitle="A Platformer game builder"
-            leftIcon={<FaCalculator size="24" />}
-            rightIcon={<FaCalculator size="24" />}
+            leftIcon={<FaCalculator size="16" />}
+            rightIcon={<FaCalculator size="16" />}
             onClick={() => {
               router.push("/").catch(console.error);
             }}

From ecad76290df99c6fd320fca1fc9abfa90f5a8d11 Mon Sep 17 00:00:00 2001
From: Joe Shen <joeshen123@gmail.com>
Date: Thu, 13 Jul 2023 19:15:58 -0700
Subject: [PATCH 7/8] merge in Joe's changes

---
 next/public/icons/gamepad-purple-solid.svg    | 23 +++++++++++++++++++
 next/public/icons/sparkle-default-regular.svg | 11 +++++++++
 next/src/components/HeroTimeBanner.tsx        | 21 +++++++++--------
 next/src/components/landing/Hero.tsx          |  6 +++--
 4 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 next/public/icons/gamepad-purple-solid.svg
 create mode 100644 next/public/icons/sparkle-default-regular.svg

diff --git a/next/public/icons/gamepad-purple-solid.svg b/next/public/icons/gamepad-purple-solid.svg
new file mode 100644
index 0000000000..aa16fa73bd
--- /dev/null
+++ b/next/public/icons/gamepad-purple-solid.svg
@@ -0,0 +1,23 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="div">
+<rect x="0.375" y="0.375" width="39.25" height="39.25" rx="19.625" fill="white"/>
+<rect x="0.375" y="0.375" width="39.25" height="39.25" rx="19.625" fill="url(#paint0_radial_295_2891)"/>
+<path id="shape" d="M16.1013 23.4H23.9025C24.7276 23.4 25.4477 23.9625 25.6503 24.765L25.7853 25.3012C26.0366 26.2987 26.933 27 27.9606 27C29.1983 27 30.2035 25.995 30.2035 24.7575V24.6525C30.2035 24.5212 30.1922 24.3862 30.1697 24.255L28.9433 17.1C28.7107 15.75 27.9006 14.835 26.8954 14.5838C25.3052 14.1862 22.9911 13.8 20.0019 13.8C17.0127 13.8 14.6948 14.1862 13.112 14.5838C12.1031 14.835 11.293 15.75 11.0605 17.1L9.83404 24.255C9.81153 24.3862 9.80028 24.5175 9.80028 24.6525V24.7575C9.80028 25.995 10.8054 27 12.0431 27C13.0708 27 13.9709 26.2987 14.2185 25.3012L14.3535 24.765C14.556 23.9625 15.2761 23.4 16.1013 23.4ZM24.0375 25.7362L23.9025 25.2H16.1013L15.9662 25.7362C15.5162 27.5362 13.8997 28.8 12.0431 28.8C9.81153 28.8 8 26.9887 8 24.7575V24.6525C8 24.4162 8.01875 24.1838 8.06001 23.9513L9.28645 16.7925C9.609 14.91 10.8204 13.2975 12.6732 12.8362C14.3947 12.4087 16.8589 12 20.0019 12C23.1449 12 25.609 12.4087 27.3268 12.8362C29.1796 13.2975 30.391 14.91 30.7135 16.7925L31.94 23.9513C31.9812 24.1838 32 24.4162 32 24.6525V24.7575C32.0037 26.9887 30.1922 28.8 27.9606 28.8C26.1041 28.8 24.4876 27.5362 24.0375 25.7362ZM16.7014 17.1V18.3H17.9015C18.4004 18.3 18.8017 18.7012 18.8017 19.2C18.8017 19.6987 18.4004 20.1 17.9015 20.1H16.7014V21.3C16.7014 21.7987 16.3 22.2 15.8012 22.2C15.3024 22.2 14.9011 21.7987 14.9011 21.3V20.1H13.7009C13.2021 20.1 12.8007 19.6987 12.8007 19.2C12.8007 18.7012 13.2021 18.3 13.7009 18.3H14.9011V17.1C14.9011 16.6012 15.3024 16.2 15.8012 16.2C16.3 16.2 16.7014 16.6012 16.7014 17.1ZM23.0023 19.8C23.3206 19.8 23.6259 19.9264 23.851 20.1515C24.0761 20.3765 24.2025 20.6817 24.2025 21C24.2025 21.3183 24.0761 21.6235 23.851 21.8485C23.6259 22.0736 23.3206 22.2 23.0023 22.2C22.684 22.2 22.3788 22.0736 22.1537 21.8485C21.9286 21.6235 21.8022 21.3183 21.8022 21C21.8022 20.6817 21.9286 20.3765 22.1537 20.1515C22.3788 19.9264 22.684 19.8 23.0023 19.8ZM24.2025 17.4C24.2025 17.0817 24.329 16.7765 24.5541 16.5515C24.7791 16.3264 25.0844 16.2 25.4027 16.2C25.721 16.2 26.0263 16.3264 26.2514 16.5515C26.4765 16.7765 26.6029 17.0817 26.6029 17.4C26.6029 17.7183 26.4765 18.0235 26.2514 18.2485C26.0263 18.4736 25.721 18.6 25.4027 18.6C25.0844 18.6 24.7791 18.4736 24.5541 18.2485C24.329 18.0235 24.2025 17.7183 24.2025 17.4Z" fill="url(#paint1_linear_295_2891)"/>
+<rect x="0.375" y="0.375" width="39.25" height="39.25" rx="19.625" stroke="url(#paint2_linear_295_2891)" stroke-width="0.75"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_295_2891" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 20) scale(40)">
+<stop offset="0.4" stop-color="#1A27FF"/>
+<stop offset="1" stop-color="#FF04FF"/>
+</radialGradient>
+<linearGradient id="paint1_linear_295_2891" x1="20" y1="12" x2="20" y2="28.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.5" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint2_linear_295_2891" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.4"/>
+<stop offset="1" stop-color="white" stop-opacity="0.15"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/next/public/icons/sparkle-default-regular.svg b/next/public/icons/sparkle-default-regular.svg
new file mode 100644
index 0000000000..13a454b993
--- /dev/null
+++ b/next/public/icons/sparkle-default-regular.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="shape" d="M10.7344 3.1625C10.5938 3.21562 10.5 3.35 10.5 3.5C10.5 3.65 10.5938 3.78438 10.7344 3.8375L12.5 4.5L13.1625 6.26562C13.2156 6.40625 13.35 6.5 13.5 6.5C13.65 6.5 13.7844 6.40625 13.8375 6.26562L14.5 4.5L16.2656 3.8375C16.4062 3.78438 16.5 3.65 16.5 3.5C16.5 3.35 16.4062 3.21562 16.2656 3.1625L14.5 2.5L13.8375 0.734375C13.7844 0.59375 13.65 0.5 13.5 0.5C13.35 0.5 13.2156 0.59375 13.1625 0.734375L12.5 2.5L10.7344 3.1625ZM0.790625 8C0.6125 8.08125 0.5 8.25938 0.5 8.45625C0.5 8.65312 0.6125 8.82812 0.790625 8.90938L1.32187 9.15625L1.575 9.27188L1.59375 9.28125L4.35313 10.5562L5.62813 13.3125L5.6375 13.3313L5.75313 13.5844L6 14.1187C6.08125 14.2969 6.25938 14.4094 6.45312 14.4094C6.64687 14.4094 6.825 14.2969 6.90625 14.1187L7.15312 13.5844L7.26875 13.3313L7.27812 13.3125L8.55313 10.5531L11.3125 9.28125L11.3313 9.27188L11.5844 9.15625L12.1187 8.90938C12.2969 8.82812 12.4094 8.65 12.4094 8.45625C12.4094 8.2625 12.2969 8.08438 12.1187 8.00313L11.5844 7.75625L11.3313 7.64062L11.3125 7.63125L8.55313 6.35625L7.28125 3.59687L7.27187 3.57812L7.15625 3.32188L6.90938 2.7875C6.82812 2.60938 6.65 2.49688 6.45625 2.49688C6.2625 2.49688 6.08438 2.60938 6.00313 2.7875L5.75625 3.32188L5.64062 3.575L5.63125 3.59375L4.35625 6.35313L1.59687 7.62813L1.57812 7.6375L1.325 7.75313L0.790625 8ZM3.38438 8.45312L4.98438 7.71562C5.30937 7.56562 5.56875 7.30625 5.71875 6.98125L6.45625 5.38125L7.19375 6.98125C7.34375 7.30625 7.60313 7.56562 7.92812 7.71562L9.52812 8.45312L7.92812 9.19063C7.60313 9.34062 7.34375 9.6 7.19375 9.925L6.45625 11.525L5.71875 9.925C5.56875 9.6 5.30937 9.34062 4.98438 9.19063L3.38438 8.45625V8.45312ZM12.5 12.5L10.7344 13.1625C10.5938 13.2156 10.5 13.35 10.5 13.5C10.5 13.65 10.5938 13.7844 10.7344 13.8375L12.5 14.5L13.1625 16.2656C13.2156 16.4062 13.35 16.5 13.5 16.5C13.65 16.5 13.7844 16.4062 13.8375 16.2656L14.5 14.5L16.2656 13.8375C16.4062 13.7844 16.5 13.65 16.5 13.5C16.5 13.35 16.4062 13.2156 16.2656 13.1625L14.5 12.5L13.8375 10.7344C13.7844 10.5938 13.65 10.5 13.5 10.5C13.35 10.5 13.2156 10.5938 13.1625 10.7344L12.5 12.5Z" fill="url(#paint0_angular_295_2899)"/>
+<defs>
+<radialGradient id="paint0_angular_295_2899" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.5 8.5) rotate(90) scale(8 6.5)">
+<stop offset="0.00335011"/>
+<stop offset="0.281416" stop-opacity="0.3"/>
+<stop offset="0.335512" stop-opacity="0.3"/>
+<stop offset="0.513925"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
index 9fdf3b3cc6..3ab03dc881 100644
--- a/next/src/components/HeroTimeBanner.tsx
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -20,21 +20,22 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
   return (
     <div
       className={clsx(
-        "flex flex-col items-start justify-center bg-black p-4",
-        "max-h-min rounded-full shadow-md",
-        "max-w-xs border-[1px] border-black border-opacity-20",
+        "flex flex-row items-center justify-center gap-x-4",
+        "h-fit w-fit py-2.5 pl-3 pr-4",
+        "rounded-[1000px] border-[1px] border-black border-opacity-20 shadow-md",
         "animate-border-pulse bg-clip-text text-transparent",
         "bg-gradient-to-r from-white to-transparent",
         "cursor-pointer"
       )}
     >
-      <div className="mb-2 flex flex-row items-center justify-start">
-        <div className="p-4 text-white">{leftIcon}</div>
-        <div className="flex flex-col">
-          <h2 className="text-md ml-2s font-bold">{title}</h2>
-          <p className="text-sm text-gray-600">{subtitle}</p>
-        </div>
-        <div className="flex justify-end p-4 text-white">{rightIcon}</div>
+      {/*<div className="flex h-fit w-fit flex-row items-center justify-center gap-x-4 rounded-[1000px] border-[0.75px] border-white/50 py-2.5 pl-3 pr-4">*/}
+      <div>{leftIcon}</div>
+      <div className="flex flex-col font-inter leading-6 tracking-normal">
+        <h2 className="ml-2s text-[12px] font-semibold md:text-[15px]">{title}</h2>
+        <p className="text-[11px] font-medium md:text-[14px]">{subtitle}</p>
+      </div>
+      <div className="flex h-8 w-8 items-center justify-center rounded-[1000px] bg-white">
+        {rightIcon}
       </div>
     </div>
   );
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
index 9c28bb1d48..f3a56f5b65 100644
--- a/next/src/components/landing/Hero.tsx
+++ b/next/src/components/landing/Hero.tsx
@@ -8,6 +8,8 @@ import { useRouter } from "next/router";
 import Image from "next/image";
 import { FaCalculator, FaChevronRight } from "react-icons/fa";
 import HeroTimeBanner from "../HeroTimeBanner";
+import GamepadIcon from "../../../public/icons/gamepad-purple-solid.svg";
+import SparkleIcon from "../../../public/icons/sparkle-default-regular.svg";
 
 const Hero: React.FC = () => {
   const router = useRouter();
@@ -55,8 +57,8 @@ const Hero: React.FC = () => {
           <HeroTimeBanner
             title="Platformer"
             subtitle="A Platformer game builder"
-            leftIcon={<FaCalculator size="16" />}
-            rightIcon={<FaCalculator size="16" />}
+            leftIcon={<GamepadIcon />}
+            rightIcon={<SparkleIcon />}
             onClick={() => {
               router.push("/").catch(console.error);
             }}

From 0ab65f5140abe7f7f629795e934f99c3f460b114 Mon Sep 17 00:00:00 2001
From: Joe Shen <joeshen123@gmail.com>
Date: Thu, 13 Jul 2023 19:20:13 -0700
Subject: [PATCH 8/8] remove commented out code

---
 next/src/components/HeroTimeBanner.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx
index 3ab03dc881..fed924a8db 100644
--- a/next/src/components/HeroTimeBanner.tsx
+++ b/next/src/components/HeroTimeBanner.tsx
@@ -28,7 +28,6 @@ const HeroTimeBanner: React.FC<HeroTimeBannerProps> = ({
         "cursor-pointer"
       )}
     >
-      {/*<div className="flex h-fit w-fit flex-row items-center justify-center gap-x-4 rounded-[1000px] border-[0.75px] border-white/50 py-2.5 pl-3 pr-4">*/}
       <div>{leftIcon}</div>
       <div className="flex flex-col font-inter leading-6 tracking-normal">
         <h2 className="ml-2s text-[12px] font-semibold md:text-[15px]">{title}</h2>