Add icons to sections

inngest · Oct 23, 2023 · ed5c1a9 · ed5c1a9
1 parent 282101b
commit ed5c1a9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 22 deletions.
diff --git a/shared/Home/Features.tsx b/shared/Home/Features.tsx
@@ -1,10 +1,18 @@
 import Link from "next/link";
-import Image from "next/image";
 
 import Container from "../layout/Container";
-import CodeWindow from "../CodeWindow";
 import Heading from "./Heading";
-import { Button } from "../Button";
+import { ArrowPathRoundedSquareIcon } from "@heroicons/react/20/solid";
+import {
+  MoonIcon,
+  ChevronDoubleRightIcon,
+  ArrowDownOnSquareStackIcon,
+  BoltSlashIcon,
+  ExclamationCircleIcon,
+  PlayPauseIcon,
+  Square3Stack3DIcon,
+} from "@heroicons/react/24/outline";
+import Replay from "../Icons/Replay";
 
 const Code = ({ children }) => (
   <code className="font-mono bg-transparent text-indigo-200 px-0">
@@ -15,6 +23,7 @@ const Code = ({ children }) => (
 const content = [
   {
     title: "Automatic retries",
+    Icon: ArrowPathRoundedSquareIcon,
     content: (
       <p>
         Every step of your function is retried whenever it throws an error.
@@ -31,6 +40,7 @@ const content = [
   },
   {
     title: "Durable sleep",
+    Icon: MoonIcon,
     content: (
       <p>
         Pause your function for hours, days or weeks with{" "}
@@ -52,6 +62,7 @@ const content = [
   },
   {
     title: "Manage concurrency",
+    Icon: ChevronDoubleRightIcon,
     content: (
       <p>
         Set custom concurrency limits for every function to fine-tune how
@@ -68,6 +79,7 @@ const content = [
   },
   {
     title: "Rate limit + debounce",
+    Icon: ArrowDownOnSquareStackIcon,
     content: (
       <p>
         Control how your functions are executed in a given time period. You can
@@ -88,6 +100,7 @@ const content = [
   },
   {
     title: "Declarative job cancellation",
+    Icon: BoltSlashIcon,
     content: (
       <p>
         Cancel jobs just by sending an event. No need to keep track of running
@@ -104,6 +117,7 @@ const content = [
   },
   {
     title: "Custom failure handlers",
+    Icon: ExclamationCircleIcon,
     content: (
       <p>
         Define failure handlers along side your function code and Inngest will
@@ -120,6 +134,7 @@ const content = [
   },
   {
     title: "Pause functions for additional input",
+    Icon: PlayPauseIcon,
     content: (
       <p>
         Use <Code>step.waitForEvent()</Code> to pause your function until
@@ -136,6 +151,7 @@ const content = [
   },
   {
     title: "Batching for high load",
+    Icon: Square3Stack3DIcon,
     content: (
       <p>
         Reduce the load on your system and save money by automatically batching
@@ -152,6 +168,7 @@ const content = [
 
   {
     title: "Replay functions",
+    Icon: Replay,
     content: (
       <p>
         Forget dead letter queues. Fix your issues then replay a failed function
@@ -178,23 +195,30 @@ export default function Features() {
       />
       <div className="mx-auto my-24">
         <div className="mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
-          {content.map(({ title, content, ctas }) => (
-            <div className="flex flex-col gap-6 text-sm text-slate-300 tracking-normal font-medium leading-normal">
-              <h3 className="text-lg font-semibold text-slate-50">{title}</h3>
-              <div className="flex-grow">{content}</div>
-              <div className="flex gap-4">
-                {ctas?.length > 0 &&
-                  ctas.map(({ href, text = "Learn more" }) => (
-                    <Link
-                      href={href}
-                      className="text-indigo-300 hover:text-white hover:underline decoration-dotted underline-offset-4 decoration-slate-50/30"
-                    >
-                      {text} →
-                    </Link>
-                  ))}
+          {content.map(
+            ({ title, Icon = ArrowPathRoundedSquareIcon, content, ctas }) => (
+              <div className="flex flex-col gap-6 text-sm text-slate-300 tracking-normal font-medium leading-normal">
+                <div className="flex gap-3 items-center text-slate-400/80">
+                  <Icon className="w-6" />
+                  <h3 className="text-lg font-semibold text-slate-50">
+                    {title}
+                  </h3>
+                </div>
+                <div className="flex-grow">{content}</div>
+                <div className="flex gap-4">
+                  {ctas?.length > 0 &&
+                    ctas.map(({ href, text = "Learn more" }) => (
+                      <Link
+                        href={href}
+                        className="text-indigo-300 hover:text-white hover:underline decoration-dotted underline-offset-4 decoration-slate-50/30"
+                      >
+                        {text} →
+                      </Link>
+                    ))}
+                </div>
               </div>
-            </div>
-          ))}
+            )
+          )}
         </div>
       </div>
       <div className="flex items-center">

diff --git a/shared/Home/Hero.tsx b/shared/Home/Hero.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
+import { XMarkIcon } from "@heroicons/react/20/solid";
 
 import Container from "../layout/Container";
 
@@ -31,9 +32,15 @@ export default function Hero() {
               without the pain.
             </p>
             <ul className="flex flex-col gap-2">
-              <li>🅧 No more battling infra </li>
-              <li>🅧 No more debugging with logs and janky dashboards</li>
-              <li>🅧 No more losing sleep during your on-call shift</li>
+              {[
+                "No more battling infra",
+                "No more debugging with logs and janky dashboards",
+                "No more losing sleep during your on-call shift",
+              ].map((r) => (
+                <li className="flex items-center gap-2">
+                  <XMarkIcon className="h-6 text-slate-400/80" /> {r}
+                </li>
+              ))}
             </ul>
             <p>
               Inngest's{" "}

diff --git a/shared/Icons/Replay.tsx b/shared/Icons/Replay.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import type { IconProps } from "./props";
+
+const Replay = ({
+  size = "1em",
+  fill = "currentColor",
+  className,
+}: IconProps) => (
+  <svg
+    viewBox="0 0 16 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    height={size}
+    width={size}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.81506 2.30058C3.62313 2.30062 1.99588 3.83075 1.62464 5.44617C1.52874 5.86347 1.11271 6.12402 0.695405 6.02812C0.278102 5.93222 0.0175536 5.51619 0.113454 5.09888C0.643729 2.79144 2.88813 0.750054 5.81503 0.75C9.52233 0.749932 11.8882 3.73207 11.8882 6.82311C11.8882 7.52813 11.7534 8.22031 11.5084 8.86955L14.5756 8.2932C14.9964 8.21412 15.4016 8.49116 15.4807 8.91197C15.5598 9.33279 15.2827 9.73803 14.8619 9.81711L10.1994 10.6932C9.92411 10.745 9.64234 10.6442 9.4623 10.4296L6.3061 6.66822C6.03087 6.34021 6.07366 5.85119 6.40166 5.57596C6.72967 5.30073 7.21869 5.34352 7.49392 5.67152L9.9454 8.59308C10.1995 8.03084 10.3376 7.427 10.3376 6.82311C10.3376 4.48762 8.56852 2.30053 5.81506 2.30058ZM5.42684 12.2497C5.85502 12.2497 6.20213 11.9026 6.20213 11.4744C6.20213 11.0462 5.85502 10.6991 5.42684 10.6991C4.99866 10.6991 4.65155 11.0462 4.65155 11.4744C4.65155 11.9026 4.99866 12.2497 5.42684 12.2497ZM3.36002 10.5701C3.36002 10.9983 3.01291 11.3454 2.58473 11.3454C2.15655 11.3454 1.80944 10.9983 1.80944 10.5701C1.80944 10.1419 2.15655 9.79481 2.58473 9.79481C3.01291 9.79481 3.36002 10.1419 3.36002 10.5701ZM0.77529 9.27791C1.20347 9.27791 1.55058 8.9308 1.55058 8.50262C1.55058 8.07444 1.20347 7.72733 0.77529 7.72733C0.347109 7.72733 0 8.07444 0 8.50262C0 8.9308 0.347109 9.27791 0.77529 9.27791Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Replay;