Add spotlight article to main page (#473)

* Add spotlight article to main page

* adjust spacing

packages/frontend/src/view/pages/home/HomePage.tsx

@@ -20,6 +20,7 @@ import {
   OFFER_TABLE_PROPS,
   STATE_UPDATE_TABLE_PROPS,
 } from './common'
+import { HomeSpotlightArticle } from './components/HomeSpotlightArticle'
 import {
   HomeStateUpdateEntry,
   HomeStateUpdatesTable,
@@ -73,7 +74,10 @@ function HomePage(props: HomePageProps) {
               showL2Transactions={props.context.showL2Transactions}
             />
             {tutorials.length > 0 && (
-              <HomeTutorials tutorials={tutorials} className="hidden xl:flex" />
+              <HomeTutorials
+                tutorials={tutorials.slice(1)}
+                className="hidden xl:flex"
+              />
             )}
           </div>
           <div className="grid grid-cols-1 gap-x-0 gap-y-8 xl:grid-cols-2 xl:gap-x-8 xl:gap-y-0">
@@ -136,6 +140,12 @@ function HomePage(props: HomePageProps) {
           {tutorials.length > 0 && (
             <HomeTutorials tutorials={tutorials} className="xl:hidden" />
           )}
+          {tutorials[0] && (
+            <HomeSpotlightArticle
+              spotlightArticle={tutorials[0]}
+              className="hidden xl:grid"
+            />
+          )}
         </div>
       </ContentWrapper>
     </Page>

packages/frontend/src/view/pages/home/components/HomeSpotlightArticle.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { Button } from '../../../components/Button'
+import { Card } from '../../../components/Card'
+import { HomeTutorialEntry } from './HomeTutorials'
+
+interface HomeSpotlightArticleProps {
+  spotlightArticle: Omit<HomeTutorialEntry, 'imageUrl'>
+  className?: string
+}
+
+export function HomeSpotlightArticle(props: HomeSpotlightArticleProps) {
+  return (
+    <Card className={classNames('grid grid-cols-2 gap-x-20', props.className)}>
+      <div className="flex flex-col justify-center gap-4 pl-6">
+        <span className="text-sm text-zinc-500">Spotlight article</span>
+        <span className="text-xxl">{props.spotlightArticle.title}</span>
+        <Button
+          as="a"
+          href={props.spotlightArticle.href}
+          variant="outlined"
+          className="w-36"
+        >
+          Read now
+        </Button>
+      </div>
+      <img src="/images/spotlight-article.png" />
+    </Card>
+  )
+}