✨ 1023 Create a card Component

next/src/components/HeroTimeBanner.tsx

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+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 (
+    <div
+      className={clsx(
+        "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>{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>
+  );
+};
+
+export default HeroTimeBanner;

next/src/components/landing/Hero.tsx

@@ -3,14 +3,15 @@ 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 { 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 = () => {
+const Hero: React.FC = () => {
   const router = useRouter();
 
   return (
@@ -48,11 +49,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="Platformer"
+            subtitle="A Platformer game builder"
+            leftIcon={<GamepadIcon />}
+            rightIcon={<SparkleIcon />}
+            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" />}