From fb6896019a999e939dd7f12196722e55bf852e1b Mon Sep 17 00:00:00 2001
From: Nick Tchayka <nick@booster.cloud>
Date: Tue, 5 Sep 2023 13:20:16 +0100
Subject: Add features

---
 src/components/CodeFrame.tsx                      | 15 +---
 src/components/HomepageFeatures/index.tsx         | 89 +++++++++++++++++------
 src/components/HomepageFeatures/styles.module.css | 11 ---
 src/pages/index.tsx                               | 11 ---
 tailwind.config.js                                |  1 +
 5 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/src/components/CodeFrame.tsx b/src/components/CodeFrame.tsx
index 957eb5b..22cff25 100644
--- a/src/components/CodeFrame.tsx
+++ b/src/components/CodeFrame.tsx
@@ -19,18 +19,11 @@ const widthClasses = {
   "1/3": "w-1/3",
 };
 
-const dimensionClasses = ["border-4"];
+const dimensionClasses = ["border-4", "flex", "flex-row", "items-center"];
 
-const lightModeClasses = ["bg-white", "text-black", "border-black"];
+const lightModeClasses = ["bg-codeBg", "text-black", "border-black"];
 
-const darkModeClasses = [
-  "bg-slate-950",
-  "text-white",
-  "border-white",
-  "shadow-neowhite",
-].map((className) => `dark:${className}`);
-
-const classes = [...dimensionClasses, ...lightModeClasses, ...darkModeClasses];
+const classes = [...dimensionClasses, ...lightModeClasses];
 
 const Frame = ({
   rainbow,
@@ -47,7 +40,7 @@ const Frame = ({
   return (
     <div className={cls}>
       <CodeBlock
-        className="!rounded-none h-full"
+        className="!rounded-none !mb-0 px-4 py-2"
         language={language}
         title={title}
       >
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index 91ef460..2191ea1 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -1,53 +1,94 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import CodeFrame from "../CodeFrame";
+
+type ShowCase =
+  | { code: string; language: string }
+  | { img: React.ComponentType<React.ComponentProps<"img">> };
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
   description: JSX.Element;
+  showcase: ShowCase;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: "Beautiful, Ready-to-Use Tools",
+    description: (
+      <>
+        NeoHaskell offers a clean and intuitive language design, complemented by
+        a core library that provides all the tools you need to start creating
+        amazing software right away.
+        <br />
+        START CODING
+      </>
+    ),
+    showcase: {
+      language: "haskell",
+      code: `processLogs rawLogs =
+  rawLogs
+  |> map parseLogs
+  |> collect
+  |> andThen (filter isImportant)
+  |> andThen (map toStructuredLog)`,
+    },
+  },
+  {
+    title: "Hassle-Free Development Environment",
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        NeoHaskell's CLI tool installs all required utilities and makes
+        multi-platform support a breeze. Whether you're compiling to native code
+        or generating WebAssembly for browser compatibility, you'll enjoy error
+        messages that guide, not hinder.
+        <br />
+        EMPOWER YOUR DEVELOPMENT
       </>
     ),
+    showcase: { code: "", language: "" },
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: "Focus-Driven, Event-Driven",
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        In NeoHaskell, you work directly events and functions that react to
+        them. Say goodbye to the cognitive overhead of managing state or
+        wrestling with dependency injection. Your focus stays where it belongs:
+        on solving problems and crafting solutions.
+        <br />
+        BEGIN YOUR JOURNEY
       </>
     ),
+    showcase: { code: "", language: "" },
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: "Naturally Full-Stack",
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Relish the ease of crafting full-stack applications in a unified
+        language environment. NeoHaskell takes care of frontend-backend
+        communication, allowing you to focus solely on your application's logic.
+        <br />
+        EXPERIENCE NATURAL FULL-STACK DEVELOPMENT
       </>
     ),
+    showcase: { code: "", language: "" },
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, showcase, description }: FeatureItem) {
+  const showcaseComponent =
+    "code" in showcase ? (
+      <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame>
+    ) : (
+      <showcase.img />
+    );
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
+    <div className="flex p-4">
+      {showcaseComponent}
+      <div className="p-7">
         <h3>{title}</h3>
         <p>{description}</p>
       </div>
@@ -57,9 +98,9 @@ function Feature({title, Svg, description}: FeatureItem) {
 
 export default function HomepageFeatures(): JSX.Element {
   return (
-    <section className={styles.features}>
+    <section>
       <div className="container">
-        <div className="row">
+        <div className="col">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index b248eb2..e69de29 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8644ef8..ccff804 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -58,17 +58,6 @@ export default function Home(): JSX.Element {
       <Layout description={`${siteConfig.tagline}`}>
         <HomepageHeader />
         <div className="container grid grid-cols-1 gap-4">
-          <CodeFrame
-            language="haskell"
-            shadowClass="shadow-neocyan"
-            width="full"
-          >
-            {`module Main where
-
-main :: IO ()
-main = putStrLn "Hello, World!"`}
-          </CodeFrame>
-
           <p className="text-red-500 font-extrabold text-5xl">
             If you're reading this, you probably found it by accident. This is a
             WIP project, and the site is far from finished. If you're curious
diff --git a/tailwind.config.js b/tailwind.config.js
index f25d42b..5a50e5e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -56,6 +56,7 @@ module.exports = {
         neoviolet: borderedShadow(8, colors.violet["400"]),
       },
       colors: {
+        codeBg: "#2D2A55",
         ...light,
         ...dark,
       },
-- 
cgit