Updated features (#448)

* [site/components][s]: Updated features

site/components/Feature.jsx

@@ -0,0 +1,59 @@
+export function Feature({ feature, index }) {
+  if (index % 2 == 0) {
+    return (
+      <div className="overflow-hidden sm:grid sm:grid-cols-2 sm:items-center lg:p-8 xl:p-12">
+        <div className="p-8">
+          <div className="mx-auto max-w-xl text-center sm:text-left">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl">
+              {feature.title}
+            </h2>
+            <p className="hidden text-gray-500 dark:text-gray-400 md:mt-6 md:block">
+              {feature.description}
+            </p>
+            <div className="mt-4 md:mt-10">
+              <a
+                href={feature.link}
+                className="inline-block rounded bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
+        </div>
+        <img
+          alt={feature.title}
+          src={feature.imageSrc}
+          className="lg:max-h-[25rem] lg:px-8 xl:px-12"
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div className="overflow-hidden sm:grid sm:grid-cols-2 sm:items-center lg:p-8 xl:p-12">
+        <div className="order-2 p-8">
+          <div className="mx-auto max-w-xl text-center sm:text-left">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl">
+              {feature.title}
+            </h2>
+            <p className="hidden text-gray-500 dark:text-gray-400 md:mt-4 md:block">
+              {feature.description}
+            </p>
+            <div className="mt-4 md:mt-8">
+              <a
+                href={feature.link}
+                className="inline-block rounded bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
+        </div>
+        <img
+          alt={feature.title}
+          src={feature.imageSrc}
+          className="order-1 lg:max-h-[25rem] lg:px-8 xl:px-12"
+        />
+      </div>
+    );
+  }
+}

site/components/Features.jsx

@@ -0,0 +1,71 @@
+import { Feature } from "./Feature";
+
+const features = [
+  {
+    title: "Custom dark and light themes",
+    description:
+      "Change the fonts and colors used throughout your website as well as switch between dark and light modes.",
+    link: "/docs/custom-theme",
+    imageSrc: "/assets/images/theme.png",
+  },
+  {
+    title: "Table of contents",
+    description:
+      "You can add a table of contents to your markdown pages as well as adding a site-wide table of contents in a LHS sidebar to allow your users to easily navigate to other pages on your website.",
+    link: "/docs/site-wide-toc",
+    imageSrc: "/assets/images/toc.png",
+  },
+  {
+    title: "Blog Support",
+    description:
+      "Blog document type for your blog posts. This way you'll be able to fetch and display them on any of your pages by using our BlogsList component (or you can create a custom one).",
+    link: "/docs/blog",
+    imageSrc: "/assets/images/blog.png",
+  },
+  {
+    title: "Markdown, MDX syntax support",
+    description:
+      "Flowershow was designed with Obsidian users in mind, so it aims to fully support Obsidian syntax, including CommonMark, GitHub Flavoured Markdown and Obsidian extensions, like Wiki links. All of your Markdown files are parsed as MDX. This means you not only can write your content using good old Markdown, but also enrich it with dynamic visualizations, immersive user interactions and much more!",
+    link: "/docs/syntax",
+    imageSrc: "/assets/images/obs_dark.png",
+  },
+  {
+    title: "Tailwind support",
+    description:
+      "Flowershow comes with built-in tailwind support on any markdown page for styling your content.",
+    link: "/docs/tailwind",
+    imageSrc: "/assets/images/tw.png",
+  },
+  {
+    title: "Mermaid and MathJax support",
+    description:
+      "Display Mermaid diagrams within your notes as well as math exaptions, where you can use LaTeX notations to denote formulas.",
+    link: "/docs/mermaid",
+    imageSrc: "/assets/images/mermaid.png",
+  },
+  {
+    title: "Full-text search",
+    description:
+      "Flowershow supports search functionality to deliver realtime results for content available on all your pages. Clicking the result will lead the user to the relevant page.",
+    link: "/docs/search",
+    imageSrc: "/assets/images/search.png",
+  },
+];
+
+export function Features() {
+  return (
+    <>
+      <div className="prose dark:prose-invert mx-auto max-w-screen-xl px-4 py-6 lg:flex lg:items-center text-center">
+        <h2>Features</h2>
+        <p>
+          Here are some of the cool features that are currently supported by
+          Flowershow
+        </p>
+      </div>
+
+      {features.map((feature, index) => (
+        <Feature key={feature.title} feature={feature} index={index} />
+      ))}
+    </>
+  );
+}

site/content/index.md

@@ -6,6 +6,7 @@ showSidebar: false
 
 import { Hero } from "components/custom/Hero.jsx"
 import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx"
+import { Features } from "components/custom/Features.jsx"
 
 <Hero />
 <WhatIsFlowershow />
@@ -130,71 +131,9 @@ import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx"
   </div> 
 </div>
 
-{/** Features (tb replaced with something nicer) **/}
+{/** Features **/}
 
-<div className="py-10 sm:px-2 lg:relative lg:px-0" id="features">
-  <div className="prose dark:prose-invert mx-auto max-w-2xl px-4 lg:max-w-4xl lg:px-8 xl:px-12">
-    <h2 className="text-center">Features</h2>
-
-Here are some of the cool features that are currently supported by Flowershow, and some that we're intensively working on.
-
-### Markdown
-
-Flowershow supports **CommonMark** and **GitHub Flavoured Markdown (GFM)** syntax, e.g. code blocks, blockquotes, lists, tasks lists and tables.
-
-[[docs/syntax|Learn more ➡]]
-
-### Obsidian wiki links
-
-Flowershow has been designed with Obsidian users in mind and so, currently, it supports internal links to other pages. Links to headings, blocks, and transclusions will also be supported in the future.
-
-[[docs/syntax|Learn more ➡]]
-
-### Custom page layouts and components
-
-You can customize and create new layouts for your pages.
-
-[[docs/layouts|Learn more ➡]]
-
-Also, thanks to MDX support, you can use custom React components within your markdown notes.
-
-[[docs/mdx|Learn more ➡]].
-
-### Tailwind support
-
-Tailwind support makes it easy to style your in-markdown HTML and custom React components.
-
-[[docs/tailwind|Learn more ➡]]
-
-### Mermaid
-
-Displaying Mermaid diagrams within in your notes.
-
-[[docs/mermaid|Learn more ➡]]
-
-### Math
-
-MathJax math exaptions support.
-
-[[docs/math|Learn more ➡]]
-
-### SEO
-
-Support for meta tags for SEO and social sharing.
-
-[[docs/seo|Learn more ➡]]
-
-### CLI tool
-
-Our goal is to make using Flowershow as seamless as possible. To facilitate smooth bootstrapping and upgrading your website we're creating a CLI tool that will take care of all the intricacies related to the whole process of publishing your notes.
-
-[[publish-tutorial|Learn more ➡]]
-
-    👷 There is a lot of other exciting stuff we're working on.
-    <a href="/docs/roadmap">Check our roadmap to learn more!</a>
-
-  </div>
-</div>
+<Features />
 
 {/** Why the name? **/}