Add a few features to the homepage

apps/web/src/icons/IcRoundFastForward.tsx

@@ -0,0 +1,18 @@
+import {SVGProps} from 'react'
+
+export function IcRoundFastForward(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="m5.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L5.58 7.11C4.91 6.65 4 7.12 4 7.93v8.14c0 .81.91 1.28 1.58.82zM13 7.93v8.14c0 .81.91 1.28 1.58.82l5.77-4.07c.56-.4.56-1.24 0-1.63l-5.77-4.07c-.67-.47-1.58 0-1.58.81z"
+      ></path>
+    </svg>
+  )
+}

apps/web/src/icons/IcRoundPeopleOutline.tsx

@@ -0,0 +1,18 @@
+import {SVGProps} from 'react'
+
+export function IcRoundPeopleOutline(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5S5.5 6.57 5.5 8.5S7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm0 6.75c-2.34 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zm11.7-3.19c1.16.84 1.96 1.96 1.96 3.44V19h3c.55 0 1-.45 1-1v-.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35c.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z"
+      ></path>
+    </svg>
+  )
+}

apps/web/src/icons/MdiLanguageTypescript.tsx

@@ -0,0 +1,18 @@
+import {SVGProps} from 'react'
+
+export function MdiLanguageTypescript(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M3 3h18v18H3V3m10.71 14.86c.5.98 1.51 1.73 3.09 1.73c1.6 0 2.8-.83 2.8-2.36c0-1.41-.81-2.04-2.25-2.66l-.42-.18c-.73-.31-1.04-.52-1.04-1.02c0-.41.31-.73.81-.73c.48 0 .8.21 1.09.73l1.31-.87c-.55-.96-1.33-1.33-2.4-1.33c-1.51 0-2.48.96-2.48 2.23c0 1.38.81 2.03 2.03 2.55l.42.18c.78.34 1.24.55 1.24 1.13c0 .48-.45.83-1.15.83c-.83 0-1.31-.43-1.67-1.03l-1.38.8M13 11.25H8v1.5h1.5V20h1.75v-7.25H13v-1.5Z"
+      ></path>
+    </svg>
+  )
+}

apps/web/src/styles/global.scss

@@ -9,7 +9,7 @@
   --web-background-variant: #fbfbfe;
   --web-foreground: #1e232a;
   --web-foreground-faded: #333a43;
-  --web-selected: hsl(230, 77%, 97%);
+  --web-selected: #f1f3fd;
   --web-selected-foreground: hsl(230, 77%, 60%);
   --web-highlight: #f3f4f6;
   --web-header-background-hsl: 0, 0%, 100%;
@@ -19,6 +19,7 @@
   --web-code-highlight: #292c3d;
   --web-code-foreground: #fbfbfe;
   --web-outline: #ecebeb;
+  --web-section1-background: #f1f3fd;
 }
 
 @mixin dark-theme {
@@ -32,9 +33,9 @@
   --web-background-variant: #181d22;
   --web-foreground: white;
   --web-foreground-faded: #eee;
-  --web-selected: #383d44;
-  --web-selected-foreground: hsl(0, 0%, 100%);
-  --web-highlight: #444548;
+  --web-selected: hsl(230, 17%, 25%);
+  --web-selected-foreground: white;
+  --web-highlight: #3b4358;
   --web-header-background-hsl: 215, 17%, 14%;
   --web-header-background: hsl(var(--web-header-background-hsl));
   --web-negative-hsl: 0, 0%, 100%;
@@ -44,6 +45,7 @@
   --web-outline: #424242;
   --web-code-inline-background: #ecebeb;
   --web-code-inline-foreground: #1e232a;
+  --web-section1-background: #302f34;
 }
 
 :root {

apps/web/src/view/HomePage.module.scss

@@ -3,6 +3,15 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
+
+  &-features {
+    padding: 30px 0;
+    //background: var(--web-section1-background);
+
+    &-desc {
+      font-size: 16px;
+    }
+  }
 }
 
 .hero {

apps/web/src/view/HomePage.tsx

@@ -1,87 +1,135 @@
 import {fromModule, HStack, px, VStack} from '@alinea/ui'
+import {IcRoundLanguage} from '@alinea/ui/icons/IcRoundLanguage'
 import {IcRoundOpenInNew} from '@alinea/ui/icons/IcRoundOpenInNew'
+import {IcRoundSearch} from '@alinea/ui/icons/IcRoundSearch'
+import {MdiSourceBranch} from '@alinea/ui/icons/MdiSourceBranch'
+import {IcRoundFastForward} from '../icons/IcRoundFastForward'
+import {IcRoundPeopleOutline} from '../icons/IcRoundPeopleOutline'
+import {MdiLanguageTypescript} from '../icons/MdiLanguageTypescript'
 import {Blocks} from './blocks/Blocks'
 import css from './HomePage.module.scss'
 import {HomePageSchema} from './HomePage.schema'
+import {Feature, Features} from './layout/Features'
 import {Hero} from './layout/Hero'
-import {Image} from './layout/Image'
 import {Layout} from './layout/Layout'
 import {WebTypo} from './layout/WebTypo'
 
 const styles = fromModule(css)
 
-const exampleCode = `schema('Blog', {
-  BlogEntry: type('Blog entry', {
-    title: text('Title'),
-    author: link('Author', {type: 'entry'}),
-  }),
-  Author: type('Author', {
-    name: text('Name')
-  })
-})`
-
-export function HomePage({
-  headline,
-  byline,
-  action,
-  screenshot,
-  blocks
-}: HomePageSchema) {
+export function HomePage(props: HomePageSchema) {
   return (
     <div className={styles.root()}>
-      <HomePageHero
-        headline={headline}
-        byline={byline}
-        action={action}
-        screenshot={screenshot}
-      />
-      <Blocks blocks={blocks} container={Layout.Container} />
+      <HomePageHero {...props} />
+
+      <section className={styles.root.features()}>
+        <Layout.Container>
+          <Features>
+            <Feature icon={MdiSourceBranch}>
+              <WebTypo>
+                <WebTypo.H2>Git-based</WebTypo.H2>
+                <WebTypo.P className={styles.root.features.desc()}>
+                  Content is version controlled in git, without editors needing
+                  any git knowledge
+                </WebTypo.P>
+              </WebTypo>
+            </Feature>
+            <Feature icon={MdiLanguageTypescript}>
+              <WebTypo>
+                <WebTypo.H2>Fully typed</WebTypo.H2>
+                <WebTypo.P className={styles.root.features.desc()}>
+                  Typescript users get a type-safe experience working with data
+                </WebTypo.P>
+              </WebTypo>
+            </Feature>
+            <Feature icon={IcRoundFastForward}>
+              <WebTypo>
+                <WebTypo.H2>Zero network overhead</WebTypo.H2>
+                <WebTypo.P className={styles.root.features.desc()}>
+                  Content is easily queryable through an in-memory SQLite
+                  database
+                </WebTypo.P>
+              </WebTypo>
+            </Feature>
+            <Feature icon={IcRoundPeopleOutline}>
+              <WebTypo>
+                <WebTypo.H2>Collaborative</WebTypo.H2>
+                <WebTypo.P className={styles.root.features.desc()}>
+                  The editing experience is built on Y.js primitives, allowing
+                  multiple editors to collaborate without merge conflicts
+                </WebTypo.P>
+              </WebTypo>
+            </Feature>
+            <Feature icon={IcRoundLanguage}>
+              <WebTypo>
+                <WebTypo.H2>Internationalization</WebTypo.H2>
+                <WebTypo.P className={styles.root.features.desc()}>
+                  Publish content in multiple languages and regions
+                </WebTypo.P>
+              </WebTypo>
+            </Feature>
+            <Feature icon={IcRoundSearch}>
+              <WebTypo>
+                <WebTypo.H2>Full text search</WebTypo.H2>
+                <WebTypo.P className={styles.root.features.desc()}>
+                  Search through content using SQlite's FTS5
+                </WebTypo.P>
+              </WebTypo>
+            </Feature>
+          </Features>
+        </Layout.Container>
+      </section>
+
+      {/*
+
+        I think below we should highlight in separate (interactive) sections:
+        - config as code => preview how to build a schema
+        - live previews
+        - query engine
+        - custom fields
+        - the editing/dashboard experience
+        - deploy "anywhere": node or edge deploys
+
+       */}
+
+      <Blocks blocks={props.blocks} container={Layout.Container} />
     </div>
   )
 }
 
-function HomePageHero({
-  headline,
-  byline,
-  action,
-  screenshot
-}: {
-  headline: string
-  byline?: string
-  //TODO: typescript alinea link
-  action?: any
-  screenshot?: any
-}) {
+function HomePageHero({headline, byline, action, screenshot}: HomePageSchema) {
   return (
     <div className={styles.hero()}>
       <Hero>
-        <VStack center>
-          <Hero.Title>{headline}</Hero.Title>
-          <Hero.ByLine>{byline}</Hero.ByLine>
-          <HStack
-            wrap
-            center
-            gap={24}
-            justify="center"
-            style={{paddingTop: px(20)}}
-          >
-            {action?.url && (
-              <Hero.Action href={action.url}>{action.label}</Hero.Action>
-            )}
-            <WebTypo.Link
-              className={styles.hero.demo()}
-              href="/demo"
-              target="_blank"
+        <Layout.Container>
+          <VStack center>
+            <Hero.Title>{headline}</Hero.Title>
+            <Hero.ByLine>{byline}</Hero.ByLine>
+            <HStack
+              wrap
+              center
+              gap={24}
+              justify="center"
+              style={{paddingTop: px(20)}}
             >
-              <HStack center gap={8}>
-                <span>Try the demo</span>
-                <IcRoundOpenInNew />
-              </HStack>
-            </WebTypo.Link>
-          </HStack>
-        </VStack>
+              {action?.url && (
+                <Hero.Action href={action.url}>{action.label}</Hero.Action>
+              )}
+              <WebTypo.Link
+                className={styles.hero.demo()}
+                href="/demo"
+                target="_blank"
+              >
+                <HStack center gap={8}>
+                  <span>Try the demo</span>
+                  <IcRoundOpenInNew />
+                </HStack>
+              </WebTypo.Link>
+            </HStack>
+          </VStack>
+        </Layout.Container>
       </Hero>
-      {screenshot && (
+
+      {/*screenshot && (
         <div className={styles.hero.screenshot()}>
           <Image
             src={screenshot.src}
@@ -91,7 +139,7 @@ function HomePageHero({
             className={styles.hero.screenshot.inner()}
           />
         </div>
-      )}
+      )*/}
     </div>
   )
 }

apps/web/src/view/blocks/FeaturesBlock.module.scss

@@ -3,46 +3,4 @@
 .root {
   position: relative;
   margin: 60px 0;
-
-  &-intro {
-    text-align: center;
-
-    &-text {
-      margin: 0 auto;
-    }
-  }
-
-  &-intro + &-items {
-    margin-top: 0;
-  }
-
-  &-items {
-    margin-top: -30px;
-
-    @include l {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: -30px;
-    }
-
-    &-item {
-      margin-top: 30px;
-
-      @include l {
-        width: calc(100% / 3);
-        padding-left: 30px;
-      }
-    }
-  }
-}
-
-.card {
-  height: 100%;
-  padding: 30px;
-  border-radius: 10px;
-  background-color: var(--web-background-variant);
-
-  > *:first-child {
-    margin-top: 0;
-  }
 }

apps/web/src/view/blocks/FeaturesBlock.schema.ts

@@ -4,7 +4,6 @@ import {richText} from '@alinea/input.richtext'
 import {ComponentType} from 'react'
 
 export const FeaturesBlockSchema = type('Features', {
-  intro: richText('Intro'),
   items: list('Items', {
     schema: schema({
       Item: type('Item', {