✨ Implement contact us and explore AI Agents buttons (#1006)

reworkd · Jul 10, 2023 · 8e063d6 · 8e063d6
1 parent fbfa222
commit 8e063d6
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 20 deletions.
diff --git a/next/public/email-24x24.svg b/next/public/email-24x24.svg
diff --git a/next/src/components/PrimaryButton.tsx b/next/src/components/PrimaryButton.tsx
@@ -1,24 +1,24 @@
 import clsx from "clsx";
+import Button from "../ui/button";
+import React from "react";
 
 type PrimaryButtonProps = {
-  children: string;
+  children: JSX.Element;
+  icon?: React.ReactNode;
   onClick?: () => void;
-  outline?: boolean;
 };
-export default function PrimaryButton({ children, onClick, outline }: PrimaryButtonProps) {
+export default function PrimaryButton({ children, onClick, icon }: PrimaryButtonProps) {
   return (
-    <button
-      type="button"
+    <Button
+      onClick={onClick}
       className={clsx(
-        "text-md rounded-lg px-4 py-2.5  shadow-sm ",
-        "transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
-        outline
-          ? "text-[#BF7DFF]/90 ring-1 ring-[#BF7DFF] hover:bg-[#BF7DFF]/20"
-          : "bg-[#BF7DFF] text-white hover:border-blue-200 hover:bg-[#9124ff] hover:text-zinc-200 "
+        "rounded-full border-[1px] border-black shadow-sm",
+        "transition duration-200 ease-in-out hover:hover:bg-white/90 focus-visible:bg-white/90 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/30",
+        "bg-white text-black"
       )}
-      onClick={onClick}
     >
+      {icon}
       {children}
-    </button>
+    </Button>
   );
 }
diff --git a/next/src/components/TextButton.tsx b/next/src/components/TextButton.tsx
@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import Button from "../ui/button";
+import React from "react";
+
+type TextButtonProps = {
+  children: JSX.Element;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+};
+export default function TextButton({ children, onClick, icon }: TextButtonProps) {
+  return (
+    <Button
+      onClick={onClick}
+      className={clsx(
+        "rounded-full",
+        "transition duration-200 ease-in-out hover:bg-neutral-900 hover:text-neutral-100 focus-visible:bg-neutral-900 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-neutral-500",
+        "bg-transparent text-white/60"
+      )}
+    >
+      {icon}
+      {children}
+    </Button>
+  );
+}
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
@@ -2,9 +2,12 @@ import FadeIn from "../motions/FadeIn";
 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";
 
 const Hero = () => {
   const router = useRouter();
@@ -43,13 +46,29 @@ const Hero = () => {
             <br />
             accomplish any objective.
           </p>
-          <PrimaryButton
-            onClick={() => {
-              router.push("/").catch(console.error);
-            }}
-          >
-            Get started
-          </PrimaryButton>
+          <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" />}
+              onClick={() => {
+                router.push("/").catch(console.error);
+              }}
+            >
+              <>
+                <span>Contact Us</span>
+                <FaChevronRight size="12" />
+              </>
+            </PrimaryButton>
+            <TextButton
+              onClick={() => {
+                router.push("/").catch(console.error);
+              }}
+            >
+              <>
+                <span>Explore AI Agents</span>
+                <FaChevronRight size="12" />
+              </>
+            </TextButton>
+          </div>
         </FadeIn>
       </div>
 

diff --git a/next/src/ui/button.tsx b/next/src/ui/button.tsx
@@ -36,7 +36,7 @@ const Button = forwardRef((props: ButtonProps, ref: ForwardedRef<HTMLButtonEleme
       onClick={onClick}
     >
       {props.ping && <Ping color="white" />}
-      <div className="flex items-center justify-center">
+      <div className="flex items-center justify-center gap-x-2.5 px-3 py-2 font-inter text-sm font-medium leading-6">
         {loading ? <Loader /> : props.children}
       </div>
     </button>

diff --git a/next/tailwind.config.cjs b/next/tailwind.config.cjs
@@ -18,6 +18,9 @@ module.exports = {
       boxShadow: {
         "3xl": "0 40px 70px -15px rgba(0, 0, 0, 0.40)" // Customize the shadow value according to your preferences.
       },
+      fontFamily: {
+        inter: ["Inter", ...defaultTheme.fontFamily.sans]
+      },
       colors: {
         blue: {
           base: {