Add container to each segment

2026-10-06 01:45:10 +03:00 · 2020-11-30 18:05:17 +08:00
1 parent a067371eed
commit 918f193e97
@@ -7,7 +7,7 @@ const AdminAccess = () => {

  return (
    <div className="py-16 bg-gray-50 dark:bg-dark-200 overflow-hidden lg:py-24">
-      <div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
+      <div className="container mx-auto px-20">
        <div className="relative items-center">
          <div className="relative">
            <SectionHeader
@@ -15,7 +15,7 @@ const AdminAccess = () => {
              title_alt={' without leaving the dashboard'} 
              subtitle={'Admin Access'} 
            />
-            <div className="grid grid-cols-2 gap-40 items-center">
+            <div className="grid grid-cols-2 gap-28 items-center">
              <Tabs
                tabId={tabId}
                setTabId={setTabId}
@@ -1,102 +0,0 @@
-import Authors from "data/Authors.json"
-
-const ArticleThumb = (props: any) => {
-  const {
-    title,
-    type,
-    description,
-    img_url,
-    url,
-    icons,
-    publish_date,
-    read_length,
-    author,
-    cta
-  } = props.article
-
-  // interface User {
-  //   name :string;
-  //   job_title :string;
-  //   username: string;
-  //   avatar_url :string;
-  // }
-
-  // @ts-ignore
-  const AuthorProfile: User = Authors[author]
-
-  const iconMarkup = icons && icons.map((icon :any) => {
-    return (
-      <img
-        key={icon.img_alt}
-        className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
-        src={icon.img_url}
-        alt={icon.img_alt}
-      />
-    )
-  })
-
-  return (
-    <div className="flex flex-col rounded-md shadow-lg overflow-hidden">
-      <div className="flex-shrink-0">
-        <img
-          className="h-48 w-full object-cover"
-          src={img_url}
-          alt={title}
-        />
-      </div>
-      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-600">
-        <div className="flex-1">
-          {icons && (
-            <div className="-mt-12 mb-6 flex -space-x-3">
-              {iconMarkup}
-            </div>
-          )}
-          <p className="text-sm font-medium text-gray-600 dark:text-dark-100">
-            <a href="#" className="hover:underline capitalize">
-              {type}
-            </a>
-          </p>
-          <a href="#" className="block mt-2">
-            <p className="text-xl text-gray-900 dark:text-white">{title}</p>
-            <p className="mt-3 text-base text-gray-500 dark:text-dark-100">
-              {description}
-            </p>
-          </a>
-        </div>
-        { AuthorProfile && (
-          <div className="mt-6 flex items-center">
-            <div className="flex-shrink-0">
-              <a href="#">
-                <span className="sr-only">{AuthorProfile.name}</span>
-                <img
-                  className="h-10 w-10 rounded-full"
-                  src={AuthorProfile.avatar_url}
-                  alt=""
-                />
-              </a>
-            </div>
-            <div className="ml-3">
-              <p className="text-sm font-medium text-gray-900 dark:text-white">
-                <a href="#" className="hover:underline">
-                  {AuthorProfile.name}
-                </a>
-              </p>
-              <div className="flex space-x-1 text-sm text-gray-500 dark:text-dark-100">
-                <time dateTime="2020-03-16">Mar 16, 2020</time>
-                <span aria-hidden="true">&middot;</span>
-                <span>6 min read</span>
-              </div>
-            </div>
-          </div>
-        )}
-        { cta && (
-          <div className="mt-6 flex items-center text-sm text-brand-600">
-            <a href={url}>{AuthorProfile ? 'Learn more' : 'View Project'}</a>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default ArticleThumb
@@ -1,11 +1,11 @@
-import ArticleThumb from 'components/ArticleThumb'
+import Card from 'components/Card'
 import SectionHeader from 'components/UI/SectionHeader'
 import ProjectExamples from "data/ProjectExamples.json"

 const BuiltExamples = () => {
  return (
-    <>
-      <div className="relative bg-gray-50 dark:bg-dark-200 py-16 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-16">
+    <div className="bg-gray-50 dark:bg-dark-200 py-16">
+      <div className="container mx-auto px-20 relative">
        <div className="absolute inset-0">
          <div className="bg-white dark:bg-dark-200 h-1/3 sm:h-2/3"></div>
        </div>
@@ -18,12 +18,22 @@ const BuiltExamples = () => {
        </div>
        <div className="relative max-w-7xl mx-auto">
          <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
-            <ArticleThumb article={ProjectExamples["vercel_and_stripe"]} />
-            <ArticleThumb article={ProjectExamples["nextjs-slack-clone"]} />
+            {ProjectExamples.map((example: any) => (
+              <Card
+                key={example.title}
+                title={example.title}
+                type="Project Example"
+                description={example.description}
+                imgUrl={example.imgUrl}
+                url={example.url}
+                ctaText={example.ctaText}
+                icons={example.icons}
+              />
+            ))}
          </div>
        </div>
      </div>
-    </>
+    </div>
  )
 }

@@ -0,0 +1,110 @@
+type PostMetaProps = {
+  name: string,
+  avatarUrl: string,
+  publishDate: string,
+  readLength: number,
+}
+
+type Props = {
+  title: string,
+  type: 'Project Example' | 'Case Study' | 'Blog Post',
+  description: string,
+  imgUrl: string,
+  url: string,
+  logoUrl?: string,
+  ctaText?: string,
+  icons?: any[],
+  postMeta?: PostMetaProps
+}
+
+const Card = (props: Props) => {
+  const {
+    title,
+    type,
+    description,
+    imgUrl,
+    url,
+    logoUrl = '',
+    ctaText = '',
+    icons = [],
+    postMeta = {
+      name: '',
+      avatarUrl: '',
+      publishDate: '',
+      readLength: ''
+    }
+  } = props
+
+  const iconMarkup = icons && icons.map((icon :any) => {
+    return (
+      <img
+        key={icon.imgAlt}
+        className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+        src={icon.imgUrl}
+        alt={icon.imgAlt}
+      />
+    )
+  })
+
+  return (
+    <div className="flex flex-col rounded-md shadow-lg overflow-hidden">
+      <div className="flex-shrink-0 dark:bg-dark-500">
+        <img
+          className="h-48 w-full object-cover"
+          src={imgUrl}
+          alt={title}
+        />
+      </div>
+      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-600">
+        <div className="flex-1">
+          {/* {icons && (
+            <div className="-mt-12 mb-6 flex -space-x-3">
+              {iconMarkup}
+            </div>
+          )} */}
+          <a href="#" target="_blank" className="text-sm font-medium capitalize text-gray-600 dark:text-dark-100 hover:underline">
+            {type}
+          </a>
+          <div className="block mt-2">
+            {type === 'Project Example'
+              ? <a href={url} className="text-xl text-gray-900 dark:text-white">{title}</a>
+              : <img src={logoUrl} className="h-9 my-4" />
+            }
+            <p className="mt-3 text-base text-gray-500 dark:text-dark-100">
+              {description}
+            </p>
+          </div>
+        </div>
+        {type === 'Case Study' && postMeta.name.length > 0 && (
+          <div className="mt-6 flex items-center">
+            <div className="flex-shrink-0">
+              <span className="sr-only">{postMeta.name}</span>
+              <img
+                className="h-10 w-10 rounded-full"
+                src={postMeta.avatarUrl}
+                alt=""
+              />
+            </div>
+            <div className="ml-3">
+              <p className="text-sm font-medium text-gray-900 dark:text-white">
+                {postMeta.name}
+              </p>
+              <div className="flex space-x-1 text-sm text-gray-500 dark:text-dark-100">
+                <time dateTime="2020-03-16">{postMeta.publishDate}</time>
+                <span aria-hidden="true">&middot;</span>
+                <span>{postMeta.readLength} min read</span>
+              </div>
+            </div>
+          </div>
+        )}
+        { ctaText && (
+          <div className="mt-6 flex items-center text-sm text-brand-600">
+            <a href={url}>{ctaText}</a>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Card
@@ -1,12 +1,12 @@
-import ArticleThumb from '../ArticleThumb'
-import SectionHeader from '../UI/SectionHeader'
-import CaseStudiesData from "./../../data/CaseStudies.json"
+import Card from 'components/Card'
+import SectionHeader from 'components/UI/SectionHeader'
+import CaseStudiesData from "data/CaseStudies.json"

 const CaseStudies = () => {

  return (
-    <>
-      <div className="relative bg-gray-50 dark:bg-dark-300 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+    <div className="relative bg-gray-50 dark:bg-dark-300 pt-16 pb-20 lg:pt-24 lg:pb-28">
+      <div className="container mx-auto px-20">
        <div className="absolute inset-0">
          <div className="bg-white dark:bg-dark-300 h-1/3 sm:h-2/3"></div>
        </div>
@@ -19,13 +19,23 @@ const CaseStudies = () => {
            />
          </div>
          <div className="mt-5 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
-            <ArticleThumb article={CaseStudiesData["monitoro"]} />
-            <ArticleThumb article={CaseStudiesData["tayfab"]} />
-            <ArticleThumb article={CaseStudiesData["llama_lab"]} />
+            {CaseStudiesData.map((caseStudy: any, idx: number) => (
+              <Card
+                key={`caseStudy_${idx}`}
+                title={caseStudy.title}
+                type={caseStudy.type}
+                description={caseStudy.description}
+                imgUrl={caseStudy.imgUrl}
+                url={caseStudy.url}
+                logoUrl={caseStudy.logoUrl}
+                // postMeta={caseStudy.postMeta}
+                ctaText={caseStudy.ctaText}
+              />
+            ))}
          </div>
        </div>
      </div>
-    </>
+    </div>
  )
 }

@@ -31,7 +31,7 @@ const Features = () => {
        </div>
        {url && (
          <div className="mt-5">
-            <dd className="mt-2 text-sm text-brand-600">Learn more link</dd>
+            <a href="#" className="mt-2 text-sm text-brand-600 hover:underline">Learn more link</a>
          </div>
        )}
      </div>
@@ -39,23 +39,25 @@ const Features = () => {
  })

  return (
-    <div className="bg-gray-50 dark:bg-dark-300 overflow-hidden py-12 sm:px-6 lg:px-16">
-      <div className="mx-auto max-w-7xl">
-        <SectionHeader
-          title={'Build Faster'}
-          title_alt={' and Focus on Your Core Products'}
-          subtitle={'A better way to build products'}
-        />
-        <div className="mt-16 grid grid-cols-12 gap-8">
-          <div className="relative pb-12 col-span-12">
-            <div className="relative lg:grid lg:grid-cols-12 lg:gap-x-8">
-              <div className="relative lg:grid lg:grid-cols-2 lg:gap-x-8 lg:col-span-7">
-                <dl className="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2">
-                  {IconSections}
-                </dl>
-              </div>
-              <div className="lg:col-span-5 flex justify-end">
-                {/* <img src="images/features.png" /> */}
+    <div className="bg-gray-50 dark:bg-dark-300 overflow-hidden py-12">
+      <div className="container mx-auto px-20">
+        <div className="mx-auto max-w-7xl">
+          <SectionHeader
+            title={'Build Faster'}
+            title_alt={' and Focus on Your Core Products'}
+            subtitle={'A better way to build products'}
+          />
+          <div className="mt-12 grid grid-cols-12 gap-8">
+            <div className="relative pb-12 col-span-12">
+              <div className="relative lg:grid lg:grid-cols-12 lg:gap-x-8">
+                <div className="relative lg:grid lg:grid-cols-2 lg:gap-x-8 lg:col-span-7">
+                  <dl className="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2">
+                    {IconSections}
+                  </dl>
+                </div>
+                <div className="lg:col-span-5 flex justify-end">
+                  {/* <img src="images/features.png" /> */}
+                </div>
              </div>
            </div>
          </div>
@@ -5,9 +5,9 @@ import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
 const MadeForDevelopers = () => {
  return (
    <div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-16">
-      <div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
+      <div className="container mx-auto px-20">

-      <SectionHeader className="text-center" title={'Supafast easy-to-use APIs'} title_alt={' that do the hard work for you'} subtitle={'MADE FOR DEVELOPERS'} paragraph={'We inspect your database and provide APIs instantly so you can stop building repetitive CRUD endpoints and focus on your product.'} />
+      <SectionHeader className="text-center w-2/3 mx-auto" title={'Supafast easy-to-use APIs'} title_alt={' that do the hard work for you'} subtitle={'MADE FOR DEVELOPERS'} paragraph={'We inspect your database and provide APIs instantly so you can stop building repetitive CRUD endpoints and focus on your product.'} />

        <div className="relative lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">

@@ -15,44 +15,41 @@ const MadeForDevelopers = () => {
            <CodeExamples />

            <div className="grid grid-cols-12 gap-2">
-
-            <dl className="mt-12 space-y-10 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-12 col-span-8 col-start-3">
-              <div className="lg:border-r-2 lg:border-gray-200 pr-6">
-                <div className="mt-5">
-                  <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
-                    TypeScript support
-                  </dt>
-                  <dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
-                    Type definitions for both server side and client side
-                  </dd>
-                  <button
-                    type="button"
-                    className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
-                  >
-                    Explore more
-                  </button>
+              <dl className="mt-12 space-y-10 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-12 col-span-8 col-start-3">
+                <div className="lg:border-r-2 lg:border-gray-200 pr-6">
+                  <div className="mt-5">
+                    <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                      TypeScript support
+                    </dt>
+                    <dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
+                      Type definitions for both server side and client side
+                    </dd>
+                    <button
+                      type="button"
+                      className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
+                    >
+                      Explore more
+                    </button>
+                  </div>
                </div>
-              </div>
-
-              <div>
-                <div className="mt-5">
-                  <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex">
-                    Local emulator
-                    <Badge>Coming Q1 2021</Badge>
-                  </dt>
-                  <dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
-                    Develop locally and push to production when you're ready
-                  </dd>
-                  <button
-                    type="button"
-                    className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
-                  >
-                    Get notified
-                  </button>
+                <div>
+                  <div className="mt-5">
+                    <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex">
+                      Local emulator
+                      <Badge>Coming Q1 2021</Badge>
+                    </dt>
+                    <dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
+                      Develop locally and push to production when you're ready
+                    </dd>
+                    <button
+                      type="button"
+                      className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
+                    >
+                      Get notified
+                    </button>
+                  </div>
                </div>
-              </div>
-            </dl>
-
+              </dl>
            </div>

          </div>
@@ -4,70 +4,72 @@ import Button from 'components/button'
 const Hero = () => {
  return (
    <div className="relative bg-dark-400 overflow-hidden px-16">
-      <div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
-        <svg
-          className="absolute bottom-0 right-0 transform translate-x-1/2 mb-48 text-gray-700 lg:top-0 lg:mt-28 lg:mb-0 xl:transform-none xl:translate-x-0"
-          width="364"
-          height="384"
-          viewBox="0 0 364 384"
-          fill="none"
-        >
-          <defs>
-            <pattern
-              id="eab71dd9-9d7a-47bd-8044-256344ee00d0"
-              x="0"
-              y="0"
-              width="20"
-              height="20"
-              patternUnits="userSpaceOnUse"
-            >
-              <rect x="0" y="0" width="4" height="4" fill="currentColor" />
-            </pattern>
-          </defs>
-          <rect width="364" height="384" fill="url(#eab71dd9-9d7a-47bd-8044-256344ee00d0)" />
-        </svg>
-      </div>
+      <div className="container mx-auto px-20">
+        <div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
+          <svg
+            className="absolute bottom-0 right-0 transform translate-x-1/2 mb-48 text-gray-700 lg:top-0 lg:mt-28 lg:mb-0 xl:transform-none xl:translate-x-0"
+            width="364"
+            height="384"
+            viewBox="0 0 364 384"
+            fill="none"
+          >
+            <defs>
+              <pattern
+                id="eab71dd9-9d7a-47bd-8044-256344ee00d0"
+                x="0"
+                y="0"
+                width="20"
+                height="20"
+                patternUnits="userSpaceOnUse"
+              >
+                <rect x="0" y="0" width="4" height="4" fill="currentColor" />
+              </pattern>
+            </defs>
+            <rect width="364" height="384" fill="url(#eab71dd9-9d7a-47bd-8044-256344ee00d0)" />
+          </svg>
+        </div>

-      <div className="relative pt-6 pb-16 sm:pb-24">
-        <main className="mt-16 sm:mt-24">
-          <div className="mx-auto max-w-7xl">
-            <div className="lg:grid lg:grid-cols-12 lg:gap-8">
-              <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
+        <div className="relative pt-6 pb-16 sm:pb-24">
+          <main className="mt-16 sm:mt-24">
+            <div className="mx-auto max-w-7xl">
+              <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+                <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">

-                <div>
-                  <h1 className="mt-4 text-4xl text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
-                    <span className="md:block">The Open Source</span>
-                    <span className="text-brand-400 md:block">Firebase Alternative</span>
-                  </h1>
-                  <p className="mt-5 text-base text-gray-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-                    Create your new project backend in less than 2 minutes with easy to use Postgres Database and Authentication.
-                  </p>
-                  <p className="mt-3 text-base text-gray-500">
-                    Storage and serverless functions coming soon
-                  </p>
+                  <div>
+                    <h1 className="mt-4 text-4xl text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
+                      <span className="md:block">The Open Source</span>
+                      <span className="text-brand-400 md:block">Firebase Alternative</span>
+                    </h1>
+                    <p className="mt-5 text-base text-gray-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                      Create your new project backend in less than 2 minutes with easy to use Postgres Database and Authentication.
+                    </p>
+                    <p className="mt-3 text-base text-gray-500">
+                      Storage and serverless functions coming soon
+                    </p>

-                  <Button className="mt-10 py-3" text="Start your project" url="#"/>
+                    <Button className="mt-10 py-3" text="Start your project" url="#"/>

-                  <p className="mt-8 text-sm text-gray-400 tracking-wide sm:mt-10">
-                    backed by
-                  </p>
-                  <div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0">
-                    <div className="flex flex-wrap items-center">
-                      <img className="h-9 sm:h-10 pr-10" src="images/ycombinator.png" alt="Y Combinator" />
-                      <img className="h-8 pr-10" src="images/mozilla.png" alt="Mozilla" />
-                      <img className="h-5 pr-10" src="images/coatue.png" alt="Coatue" />
+                    <p className="mt-8 text-sm text-gray-400 tracking-wide sm:mt-10">
+                      backed by
+                    </p>
+                    <div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0">
+                      <div className="flex flex-wrap items-center">
+                        <img className="h-9 sm:h-10 pr-10" src="images/logos/yc--grey.png" alt="Y Combinator" />
+                        <img className="relative -top-1 h-7 pr-10" src="images/logos/mozilla--grey.png" alt="Mozilla" />
+                        <img className="h-5 pr-10" src="images/logos/coatue.png" alt="Coatue" />
+                      </div>
                    </div>
                  </div>
-                </div>

+                </div>
+                <div className="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
+                  {/* <div className="bg-white sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden"></div> */}
+                  {/* <img src="images/hero.png" className="relative" style={{ right: -20 }} /> */}
+                </div>        
              </div>
-              <div className="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
-                {/* <div className="bg-white sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden"></div> */}
-                {/* <img src="images/hero.png" className="relative" style={{ right: -20 }} /> */}
-              </div>        
            </div>
-          </div>
-        </main>
+          </main>
+        </div>
      </div>
    </div>
  )
@@ -1,26 +1,47 @@
-{
-  "monitoro": {
-    "img_url": "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
-    "type": "case study",
-    "title": "Monitoro gets to 73M api requests in a week",
+[
+  {
+    "type": "Case Study",
+    "imgUrl": "images/casestudy.png",
+    "logoUrl": "images/logos/monitoro.png",
+    "organization": "Monitoro",
    "url": "https://supabase.io/casestudies/monitoro",
-    "description":"Omar Kamali is the founder of Monitoro, a service for scraping countless websites 24/7 to notify  customers when these websites change. To create this product, Omar needed to handle massive data throughput whilst ensuring his product was reliable and resilient to satisfy a rapidly growing user base.",
-    "author" : "paul_copplestone"
+    "description":"Supabase helped Monitoro scale to millions of API requests.",
+    "postMeta": {
+      "name" : "Paul Copplestone",
+      "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4",
+      "publishDate": "Mar 16, 2020",
+      "readLength": 6
+    },
+    "ctaText": "View case study"
  },
-  "tayfab": {
-    "img_url": "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
-    "type": "case study",
-    "title": "Tayfab",
+  {
+    "type": "Case Study",
+    "imgUrl": "images/casestudy.png",
+    "logoUrl": "images/logos/monitoro.png",
+    "organization": "Tayfab",
    "url": "https://supabase.io/casestudies/monitoro",
-    "description":"Sarup Banskota loves creating new products that delight his customers. He knows he can add the most value by understanding his client's needs and shipping impressive products fast. For his latest product, Tayfab, he needed to ship quality product fast.",
-    "author" : "paul_copplestone"
+    "description":"Supabase helped Monitoro scale to millions of API requests.",
+    "postMeta": {
+      "name" : "Paul Copplestone",
+      "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4",
+      "publishDate": "Mar 27, 2020",
+      "readLength": 5
+    },
+    "ctaText": "View case study"
  },
-  "llama_lab": {
-    "img_url": "images/llamalab.png",
-    "type": "case study",
-    "title": "Llama Lab",
+  {
+    "type": "Blog Post",
+    "imgUrl": "images/casestudy.png",
+    "logoUrl": "images/logos/xendit.png",
+    "organization": "Llama Lab",
    "url": "https://supabase.io/casestudies/monitoro",
-    "description":"Amal first discovered us on Ui.Dev newsletter - he doesn't normally click on things in the newsletter but when he saw \"open source firebase Postgres\" as a dev with firebase experience he immediately got it",
-    "author" : "paul_copplestone"
+    "description":"Supabase helped Monitoro scale to millions of API requests.",
+    "postMeta": {
+      "name" : "Paul Copplestone",
+      "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4",
+      "publishDate": "Mar 20, 2020",
+      "readLength": 10
+    },
+    "ctaText": "View case study"
  }
-}
+]
@@ -1,44 +1,40 @@
-{
-  "vercel_and_stripe": {
-    "img_url": "images/payments-demo.png",
-    "type": "project example",
+[
+  {
+    "imgUrl": "images/payments-demo.png",
    "title": "NextJS, Stripe and Supabase",
    "url": "https://github.com/supabase/supabase/tree/master/examples",
    "description":"Easily deploy a Supabase powered app with Stripe already built in for payments",
-
    "icons" : [
      {
-        "img_url": "https://avatars3.githubusercontent.com/u/54469796?s=480&v=4",
-        "img_alt": "supabase icon"
+        "imgUrl": "https://avatars3.githubusercontent.com/u/54469796?s=480&v=4",
+        "imgAlt": "supabase icon"
      },
      {
-        "img_url": "https://avatars1.githubusercontent.com/u/14985020?s=480&v=4",
-        "img_alt": "vercel icon"
+        "imgUrl": "https://avatars1.githubusercontent.com/u/14985020?s=480&v=4",
+        "imgAlt": "vercel icon"
      },
      {
-        "img_url": "https://avatars3.githubusercontent.com/u/856813?s=480&v=6",
-        "img_alt": "stripe icon"
+        "imgUrl": "https://avatars3.githubusercontent.com/u/856813?s=480&v=6",
+        "imgAlt": "stripe icon"
      }
    ],
-    "cta" : true
+    "ctaText" : "View Project"
  },
-  "nextjs-slack-clone": {
-    "img_url": "images/slack-clone.png",
-    "type": "project example",
+  {
+    "imgUrl": "images/slack-clone.png",
    "title": "NextJS realtime chat using Supabase",
    "url": "https://github.com/supabase/supabase/tree/master/examples/nextjs-slack-clone",
    "description":"Full-stack Slack clone example",
-
    "icons" : [
      {
-        "img_url": "https://avatars3.githubusercontent.com/u/54469796?s=480&v=4",
-        "img_alt": "supabase icon"
+        "imgUrl": "https://avatars3.githubusercontent.com/u/54469796?s=480&v=4",
+        "imgAlt": "supabase icon"
      },
      {
-        "img_url": "https://avatars1.githubusercontent.com/u/14985020?s=480&v=4",
-        "img_alt": "vercel icon"
+        "imgUrl": "https://avatars1.githubusercontent.com/u/14985020?s=480&v=4",
+        "imgAlt": "vercel icon"
      }
    ],
-    "cta" : true
+    "ctaText" : "View Project"
  }
-}
+]
@@ -28,7 +28,7 @@
    "icon" : "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z",
    "description": "Trigger backend code automatically with database events, without ever worrying about scaling a server.",
    "description_short": "",
-    "label": "Coming soon Q1 2021",
+    "label": "Coming soon",
    "url" : ""
  }
 }
@@ -1,28 +0,0 @@
-<svg width="213" height="107" viewBox="0 0 213 107" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d)">
-<rect width="160" height="100" rx="5" transform="matrix(0.997859 -0.0654031 0.475931 0.879483 3 12.4645)" fill="white"/>
-</g>
-<line x1="2" y1="-2" x2="118" y2="-2" transform="matrix(0.997859 -0.0654031 0.475931 0.879483 61.0317 81.515)" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M68.8608 67.3418C68.3351 66.3703 68.8024 65.5242 69.9047 65.452L80.8811 64.7325C81.9833 64.6603 83.303 65.3893 83.8287 66.3607L89.0639 76.035L74.096 77.0161L68.8608 67.3418Z" fill="#ED9797"/>
-<path d="M82.8608 45.4786C82.3351 44.5071 82.8024 43.661 83.9047 43.5888L94.8811 42.8694C95.9833 42.7971 97.303 43.5261 97.8287 44.4975L114.01 74.3999L99.0425 75.381L82.8608 45.4786Z" fill="#F5B796"/>
-<path d="M111.615 50.8794C111.089 49.9079 111.556 49.0618 112.659 48.9896L123.635 48.2702C124.737 48.1979 126.057 48.9269 126.583 49.8983L138.957 72.7649L123.989 73.7459L111.615 50.8794Z" fill="#8BCFFD"/>
-<path d="M123.235 24.6188C122.709 23.6473 123.177 22.8012 124.279 22.729L135.255 22.0096C136.358 21.9373 137.677 22.6663 138.203 23.6377L163.903 71.1298L148.935 72.1108L123.235 24.6188Z" fill="#9FE7C7"/>
-<circle r="3.5" transform="matrix(0.997859 -0.0654031 0.475931 0.879483 75.1547 64.6525)" stroke="black" stroke-width="2"/>
-<circle r="3.5" transform="matrix(0.997859 -0.0654031 0.475931 0.879483 89.6308 43.6688)" stroke="black" stroke-width="2"/>
-<circle r="3.5" transform="matrix(0.997859 -0.0654031 0.475931 0.879483 118.385 49.0696)" stroke="black" stroke-width="2"/>
-<circle r="3.5" transform="matrix(0.997859 -0.0654031 0.475931 0.879483 130.005 22.809)" stroke="black" stroke-width="2"/>
-<line x1="1" y1="-1" x2="25.9072" y2="-1" transform="matrix(0.423322 -0.636957 1.02129 0.609962 77.9333 63.1044)" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="1" y1="-1" x2="19.2485" y2="-1" transform="matrix(-1.10087 -0.242671 -0.101622 -0.847867 115.176 47.9139)" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="1" y1="-1" x2="30.241" y2="-1" transform="matrix(0.273193 -0.717507 1.07126 0.512787 121.163 47.5215)" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<defs>
-<filter id="filter0_d" x="0.839844" y="0.314671" width="211.571" height="105.783" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-</defs>
-</svg>