Advertise use cases

.editorconfig

@@ -10,7 +10,7 @@ trim_trailing_whitespace=true
 max_line_length=120
 insert_final_newline=true
 
-[*.{ts,js,jsx,tsx,json,yaml,yml}]
+[*.{css,ts,js,jsx,tsx,json,yaml,yml}]
 indent_style=space
 indent_size=2
 tab_width=2
@@ -19,3 +19,4 @@ tab_width=2
 indent_style=space
 indent_size=4
 tab_width=4
+

src/pages/index.js

@@ -6,7 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import styles from './styles.module.css'
 
-const featureRows = [
+const quickLinkRow = [
   [
     {
       title: 'What is KILT?',
@@ -47,6 +47,43 @@ const featureRows = [
   ],
 ]
 
+const useCases = [
+  {
+    title: 'Your Friendly Name for the Web',
+    imageUrl: 'img/expert_light.svg',
+    imageUrlDark: 'img/expert_dark.svg',
+    link: 'https://w3n.id',
+    description: (
+      <>
+        Claim your web3name! A unique, human readable name that can be used as an alias for your DID.
+      </>
+    ),
+  },
+  {
+    title: 'Send Funds to Your DID',
+    imageUrl: 'img/tools.svg',
+    imageUrlDark: 'img/tools.svg',
+    link: 'docs/develop/sdk/quickstart',
+    description: (
+      <>
+        No need to remember long cryptic account addresses.
+        Add a service endpoint to your DID that specifies where asset should be send to.
+      </>
+    ),
+  },
+  {
+    title: 'Prove Your Public Identity',
+    imageUrl: 'img/apps-light.svg',
+    imageUrlDark: 'img/apps-dark.svg',
+    link: 'docs/develop/builtonkilt',
+    description: (
+      <>
+        Make sure that others know who you are when you comment on polkassembly or are a public figure in the polkadot ecosystem.
+      </>
+    ),
+  },
+]
+
 function Feature({ imageUrl, imageUrlDark, title, description, link }) {
   const imgUrl = useBaseUrl(imageUrl)
   const imgUrlDark = useBaseUrl(imageUrlDark)
@@ -72,6 +109,55 @@ function Feature({ imageUrl, imageUrlDark, title, description, link }) {
   )
 }
 
+function UseCaseImage({ title, imgUrl, imgUrlDark }) {
+
+  return (<div className="text--center">
+    <ThemedImage
+      alt={title}
+      className={styles.featureImage}
+      sources={{
+        light: imgUrl,
+        dark: imgUrlDark,
+      }}
+    />
+  </div>)
+}
+
+function UseCaseText({ title, description, link }) {
+
+  return (<div className="text--center">
+    <a href={useBaseUrl(link)} className={styles.featureLink}>
+      <h3>{title}</h3>
+    </a>
+    <p>{description}</p>
+  </div>)
+}
+
+function UseCase({ imageUrl, imageUrlDark, title, description, link, index }) {
+  const imgUrl = useBaseUrl(imageUrl)
+  const imgUrlDark = useBaseUrl(imageUrlDark)
+
+  let text = (
+    <div className={clsx('col col--8')}>
+      {UseCaseText({ title, description, link })}
+    </div>
+  )
+
+  let img = (
+    <div className={clsx('col col--4')}>
+      {imgUrl && (
+        UseCaseImage({ title, imgUrl, imgUrlDark })
+      )}
+    </div>
+  )
+
+  return (<div className={clsx('row')}>
+    {index % 2 == 0 && [text, img]}
+    {index % 2 == 1 && [img, text]}
+  </div>)
+}
+
+
 export default function Home() {
   const context = useDocusaurusContext()
   const { siteConfig = {} } = context
@@ -87,10 +173,10 @@ export default function Home() {
         </div>
       </header>
       <main>
-        {featureRows && featureRows.length > 0 && (
+        {quickLinkRow && quickLinkRow.length > 0 && (
           <section className={styles.features}>
             <div className="container">
-              {featureRows.map((features, row_idx) => (
+              {quickLinkRow.map((features, row_idx) => (
                 <div className="row" key={row_idx}>
                   {features.map((props, idx) => (
                     <Feature key={`${row_idx}-${idx}`} {...props} />
@@ -100,6 +186,16 @@ export default function Home() {
             </div>
           </section>
         )}
+        {useCases && useCases.length > 0 && (
+          <section className={styles.use_case}>
+            <div className="container">
+              <h1>Use Cases</h1>
+              {useCases.map((useCaseProps, index) => (
+                <UseCase key={index} index={index} {...useCaseProps} />
+              ))}
+            </div>
+          </section>
+        )}
       </main>
     </Layout>
   )

src/pages/styles.module.css

@@ -44,3 +44,24 @@
 html[data-theme='dark'] .featureLink {
   color: white;
 }
+
+.useCases {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+  text-align: center;
+}
+
+.useCaseImage {
+  height: 200px;
+  width: 200px;
+}
+
+.useCaseLink {
+  color: #000000;
+}
+
+html[data-theme='dark'] .useCaseLink {
+  color: white;
+}