Feature/main header replacement

components/ArticlePrimary.js

@@ -0,0 +1,71 @@
+import MarkdownRenderer from 'react-markdown-renderer'
+import Link from '@/components/Link'
+import { useBrandingTheme } from '@/lib/hooks/useBrandingTheme'
+import Image from '@/components/Image'
+
+const ArticlePrimary = ({ slug, title, summary, authors }) => {
+  const { theme } = useBrandingTheme()
+
+  return (
+    <article className={`container mx-auto grid grid-cols-12`}>
+      <div className={`col-span-full md:col-end-9`}>
+        <Link href={`/articles/${slug}`}>
+          <h2 className="mb-2 text-3xl font-medium md:mb-4 md:text-6xl">
+            {<MarkdownRenderer markdown={title} />}
+          </h2>
+          <div className="mb-2 md:mb-4">
+            <h3 className="hyphens-auto line-clamp-3 md:text-xl">
+              {<MarkdownRenderer markdown={summary} />}
+            </h3>
+          </div>
+        </Link>
+
+        <div className="mb-4 xl:mb-10">
+          <Link
+            href={`/articles/${slug}`}
+            aria-label="Read whole article"
+            className={`bg-io_${theme}-600 relative inline-flex rounded-full py-4 px-9 text-base font-bold leading-none text-white transition-colors delay-100 hover:bg-white hover:text-io_${theme}-600`}
+          >
+            <span>Read the whole article</span>
+          </Link>
+        </div>
+
+        <div className="col-span-full hidden md:col-end-9 md:block">
+          <div className="flex flex-row gap-4">
+            <div className="flex items-center -space-x-6 xl:-space-x-12">
+              {authors.map((author, index) => (
+                <div
+                  key={author.name}
+                  className="flex-0 relative overflow-hidden rounded-full border-4 border-transparent md:h-16 md:w-16 xl:h-32 xl:w-32"
+                  style={{ zIndex: authors.length - index }}
+                >
+                  <Image
+                    key={author.name}
+                    src={author.avatar}
+                    width={200}
+                    height={200}
+                    alt="avatar"
+                    objectFit="cover"
+                    className="rounded-full"
+                  />
+                </div>
+              ))}
+            </div>
+            {authors.map((author) => (
+              <div className="xl:text-2xl" key={author.name}>
+                <p className="mb-0">
+                  <Link href={`/authors/${author.slug[0]}`} className="font-semibold">
+                    by {author.name}
+                  </Link>
+                </p>
+                <p className="mb-0">{author.occupation}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export default ArticlePrimary

next.config.js

@@ -73,6 +73,29 @@ module.exports = withBundleAnalyzer({
       use: ['@svgr/webpack'],
     })
 
+    // Fixme
+    //  This is pre-webpack5 way to load files.
+    //  More info here: https://webpack.js.org/guides/asset-modules/
+    // config.module.rules.push({
+    //   test: /\.mp4$/,
+    //   use: [
+    //     {
+    //       loader: 'file-loader',
+    //       options: {
+    //         name: '[path][name].[ext]',
+    //       },
+    //     },
+    //   ],
+    //   type: 'javascript/auto',
+    // })
+
+    // Fixme
+    //  This is the modern way to load files
+    config.module.rules.push({
+      test: /\.mp4/,
+      type: 'asset/resource',
+    })
+
     if (!dev && !isServer) {
       // Replace React with Preact only in client production build
       Object.assign(config.resolve.alias, {

pages/index.js

@@ -4,18 +4,17 @@ import siteMetadata from '@/data/siteMetadata'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import { getLatestVideos } from '@/lib/youtube'
 import { getLatestJobs } from '@/lib/jobs'
-import Image from '@/components/Image'
 import JobGrid from '@/components/JobGrid'
 import VideoCarousel from '@/components/VideoCarousel'
 import { getAllAuthors } from '@/lib/authors'
 import SectionTitle from '@/components/SectionTitle'
 import Arrow from '@/data/arrow.svg'
 import { useBrandingTheme } from '@/lib/hooks/useBrandingTheme'
 import Article from '@/components/Article'
-import Image1 from '../public/iO-technology-blog1.png'
-import Image2 from '../public/iO-technology-blog2.png'
+import ArticlePrimary from '@/components/ArticlePrimary'
 import ContributorsGrid from '@/components/ContributorsGrid'
 import shuffle from '@/lib/shuffle'
+import BackgroundVideo from 'public/videos/i-twist-green_16x9-rechts.mp4'
 
 const MAX_BLOG_POSTS = 5
 
@@ -43,79 +42,40 @@ export default function Home({ posts, videos, jobs, contributors }) {
   return (
     <>
       <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
-      <div className={`bg-io_${theme}-500`}>
-        <div className="pb-14 pt-24">
-          <div className="container mx-auto grid grid-cols-12 gap-x-5">
-            <h1 className="relative z-10 col-span-full text-4xl md:col-start-4 md:text-5xl xl:text-7xl">
-              Is technology your window of{' '}
-              <span className="font-serif font-light">infinite opportunity</span>?
-            </h1>
-            <div className="xl:-mt- col-span-full -mt-5 mb-12 flex md:col-span-10 md:mt-8 xl:col-span-7">
-              <div className="w-1/2">
-                <Image
-                  alt="Illustration"
-                  src={Image1}
-                  width={2160}
-                  height={2160}
-                  layout="responsive"
-                  sizes="(min-width: 768px) 20vw, 33vw"
-                  priority={true}
-                  placeholder="blur"
-                />
-              </div>
-              <div className="w-1/2">
-                <Image
-                  alt="Illustration"
-                  src={Image2}
-                  width={2160}
-                  height={2160}
-                  layout="responsive"
-                  sizes="(min-width: 768px) 20vw, 33vw"
-                  priority={true}
-                  placeholder="blur"
-                  className="rounded-full"
-                />
-              </div>
-            </div>
-            <span className="col-span-full mb-6 md:col-start-7 md:mb-0 xl:col-start-8 xl:flex xl:items-center">
-              <p className="text-lg">
-                We are iO – a growing team of experts thriving on curiosity and explorers of all
-                things <span className="font-serif">new and exciting</span>. As an end-to-end agency
-                we <span className="font-serif">think big and work locally</span> in strategy,
-                creation, content, marketing & technology - across every industry imaginable.
-                Knowledge is the foundation of everything we undertake. Are you creative, curious
-                and hungry for knowledge? Feed your mind.
-              </p>
-            </span>
-            <ul className="col-span-full md:col-span-6 md:row-start-3 xl:col-span-3 xl:row-start-1">
-              <li className="mb-4 flex items-center last:mb-0">
-                <a href="#articles">Our latest articles</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
-              </li>
-              <li className="mb-4 flex items-center last:mb-0">
-                <a href="#videos">Our latest videos</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
-              </li>
-              <li className="mb-4 flex items-center last:mb-0">
-                <a href="#people">Our writers &amp; speakers</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
-              </li>
-              <li className="mb-4 flex items-center last:mb-0">
-                <a href="#jobs">Some of our jobs</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
-              </li>
-            </ul>
-          </div>
+      <div className={`bg-io_${theme}-500 relative`}>
+        <div className="absolute top-0 right-0 bottom-0 left-0">
+          <video className="h-full w-full object-cover" autoPlay loop>
+            <source src={BackgroundVideo} type="video/mp4" />
+          </video>
         </div>
+        <section className="pb-14 pt-24">
+          {posts.length &&
+            posts.slice(0, 1).map((firstArticle) => {
+              const { slug, title, summary } = firstArticle
+              const authorsResolved = firstArticle.authors.map((author) => {
+                return authors[author]
+              })
+
+              return (
+                <ArticlePrimary
+                  key={slug}
+                  slug={slug}
+                  title={title}
+                  summary={summary}
+                  authors={authorsResolved}
+                />
+              )
+            })}
+        </section>
       </div>
 
       <SectionTitle id="articles">
-        Our latest <span className="font-serif font-light">articles</span>
+        More <span className="font-serif font-light">articles</span>
       </SectionTitle>
 
       <section className="container mx-auto">
         {!posts.length && 'No articles found.'}
-        {posts.slice(0, MAX_BLOG_POSTS).map((frontMatter, index) => {
+        {posts.slice(1, MAX_BLOG_POSTS).map((frontMatter, index) => {
           const { slug, date, title, summary, tags } = frontMatter
           const authorsResolved = frontMatter.authors.map((author) => {
             return authors[author]