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 @@ + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + + + + + + + + diff --git a/next/src/components/HeroTimeBanner.tsx b/next/src/components/HeroTimeBanner.tsx new file mode 100644 index 0000000000..fed924a8db --- /dev/null +++ b/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 = ({ + title, + subtitle, + leftIcon, + rightIcon, + onClick, +}) => { + return ( +
+
{leftIcon}
+
+

{title}

+

{subtitle}

+
+
+ {rightIcon} +
+
+ ); +}; + +export default HeroTimeBanner; diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx index 2a75cb3d06..f3a56f5b65 100644 --- a/next/src/components/landing/Hero.tsx +++ b/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.

+ } + rightIcon={} + onClick={() => { + router.push("/").catch(console.error); + }} + />
}