docs: update website features (#640)

justfile

@@ -150,3 +150,7 @@ bump-version kind='patch':
 	fi
 	git add Cargo.toml
 	echo "Done"
+
+# Start a local development server for the project's website
+@start-website:
+	cd website && pnpm install && pnpm start

website/src/components/HomepageFeatures/index.tsx

@@ -5,46 +5,39 @@ import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<"svg">>;
+  imgSrc: string;
   description: ReactNode;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: "Integrates with your shell",
+    title: "Create your own channels",
-    Svg: require("@site/static/img/integrate_icon.svg").default,
+    imgSrc: require("@site/static/img/files-toml.png").default,
     description: (
       <>
-        Television integrates with your shell and lets you quickly search
+        <a href="/docs/Users/channels">Create your own channels in a simple TOML file and search through
-        through any kind of data source (files, git repositories, environment
+        files, git repositories, environment variables, docker images, and more.
-        variables, docker images, you name it) using a fuzzy matching algorithm
+        </a>
-        and is designed to be extensible.
       </>
     ),
   },
   {
-    title: "Insipred by great tools",
+    title: "Integrates with your shell",
-    Svg: require("@site/static/img/inspired_icon.svg").default,
+    imgSrc: require("@site/static/img/zsh-integration.png").default,
     description: (
       <>
-        It is inspired by the neovim{" "}
+        <a href="/docs/Users/shell-integration">
-        <a href="https://github.com/nvim-telescope/telescope.nvim">telescope</a>{" "}
+        Television integrates with your shell and provides autocompletion that is both
-        plugin and leverages{" "}
+          extensible and configurable to use your own channels.
-        <a href="https://github.com/tokio-rs/tokio">tokio</a> and the{" "}
+        </a>
-        <a href="https://github.com/helix-editor/nucleo">nucleo</a> matcher used
-        by the <a href="https://github.com/helix-editor/helix">helix</a> editor
-        to ensure optimal performance.
       </>
     ),
   },
 ];
 
-function Feature({ title, Svg, description }: FeatureItem) {
+function Feature({ title, imgSrc, description }: FeatureItem) {
   return (
     <div className={clsx("col col--6", styles.featureItem)}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
       <div
         className={clsx(
           "text--center padding-horiz--md",
@@ -54,6 +47,14 @@ function Feature({ title, Svg, description }: FeatureItem) {
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>
       </div>
+      <div className="featureImageContainer">
+        <img 
+          src={imgSrc} 
+          alt={title}
+          className={styles.featureImage} 
+          role="img" 
+        />
+      </div>
     </div>
   );
 }

website/src/components/HomepageFeatures/styles.module.css

@@ -5,6 +5,22 @@
   width: 100%;
 }
 
+.featureImageContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.featureImage {
+  display: flex;
+  width: 80%;
+  justify-content: center;
+  margin: 0 auto;
+  border-radius: 6px;
+  border: 3px dotted var(--ifm-font-color-secondary);
+}
+
 .featureSvg {
   height: 120px;
   width: 120px;
@@ -23,4 +39,4 @@ html[data-theme='dark'] .featureSvg {
   display: flex;
   flex-direction: column;
   align-items: center;
-}
+}

website/src/pages/index.module.css

@@ -18,6 +18,7 @@
   justify-content: center;
   gap: 2rem;
   margin-top: 2rem;
+  margin-bottom: 2rem;
   padding: 0 2rem;
 }
 
@@ -155,4 +156,4 @@
 
 .main {
   margin-bottom: 3rem;
-}
+}

website/src/pages/index.tsx

@@ -4,6 +4,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import Heading from "@theme/Heading";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
 
 import styles from "./index.module.css";
 
@@ -21,7 +22,7 @@ function HomepageHeader() {
 
 export default function Home(): ReactNode {
   return (
-    <Layout description="Description will go into a meta tag in <head />">
+    <Layout description="The cross-platform, fast and extensible fuzzy finder.">
       <div className={clsx("container", styles.main)}>
         <HomepageHeader />
         <main>
@@ -65,6 +66,7 @@ export default function Home(): ReactNode {
               </div>
             </div>
           </div>
+          <HomepageFeatures />
         </main>
       </div>
     </Layout>