feat: update case studies layout

apps/www/_case-studies/epsilon3.mdx

@@ -7,6 +7,7 @@ author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
 logo: /images/case-studies/logos/epsilon3.png
+logo_inverse: /images/case-studies/logos/light/epsilon3.png
 tags:
   - supabase
 date: '2023-02-14'

apps/www/_case-studies/mobbin.mdx

@@ -8,6 +8,7 @@ author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
 logo: /images/case-studies/logos/mobbin.png
+logo_inverse: /images/case-studies/logos/light/mobbin.png
 tags:
   - supabase
 date: '2023-02-14'

apps/www/_case-studies/replenysh.mdx

@@ -7,6 +7,7 @@ author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
 logo: /images/case-studies/logos/replenysh.png
+logo_inverse: /images/case-studies/logos/light/replenysh.png
 tags:
   - supabase
 date: '2023-02-14'

apps/www/_case-studies/xendit.mdx

@@ -7,6 +7,7 @@ author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
 logo: /images/case-studies/logos/xendit.png
+logo_inverse: /images/case-studies/logos/light/xendit.png
 company_url: https://xendit.co
 tags:
   - supabase

apps/www/pages/case-studies/case-studies.module.css

@@ -1,4 +1,5 @@
 .bg-visual {
+  animation: fadeIn 3s ease-out both;
   background-image:
     /* Bg glow */ radial-gradient(
       80% 100% at 50% 75%,
@@ -18,7 +19,7 @@
     radial-gradient(2px 2px at 49% 27%, #3ecf8e90 0%, #3ecf8e00 100%),
     radial-gradient(1px 1px at 52% 7%, #3ecf8e75 0%, #3ecf8e00 100%),
     radial-gradient(1px 1px at 55% 21%, #3ecf8e90 0%, #3ecf8e00 100%),
-    radial-gradient(2px 2px at 59% 27%, #3ecf8e 0%, #3ecf8e00 100%),
+    radial-gradient(1px 1px at 59% 27%, #3ecf8e 0%, #3ecf8e00 100%),
     radial-gradient(1px 1px at 61% 14%, #3ecf8e90 0%, #3ecf8e00 100%),
     radial-gradient(1px 1px at 64% 44%, #3ecf8e 0%, #3ecf8e00 100%),
     radial-gradient(1px 1px at 74% 15%, #3ecf8e 0%, #3ecf8e00 100%),
@@ -53,3 +54,12 @@
   background: #7fe5b794;
   box-shadow: 0 -52px 0 -30vw #ffffff;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

apps/www/pages/case-studies/index.tsx

@@ -14,8 +14,10 @@ import { Typography, Badge, Space, Select } from '@supabase/ui'
 import PostTypes from '~/types/post'
 import BlogListItem from '~/components/Blog/BlogListItem'
 import BlogHeader from '~/components/Blog/BlogHeader'
-import ImageGrid from '~/components/ImageGrid'
+import { motion } from 'framer-motion'
 import styles from './case-studies.module.css'
+import Link from 'next/link'
+import { GlassPanel } from 'ui'
 
 export async function getStaticProps() {
   const allPostsData = getSortedPosts('_case-studies')
@@ -37,7 +39,6 @@ export async function getStaticProps() {
 function Blog(props: any) {
   const [category, setCategory] = useState('all')
   const [blogs, setBlogs] = useState(props.blogs)
-
   const { basePath } = useRouter()
 
   useEffect(() => {
@@ -52,18 +53,15 @@ function Blog(props: any) {
     )
   }, [category])
 
-  console.log(blogs)
-
   const caseStudyThumbs = blogs.map((blog: PostTypes, idx: number) => {
     return {
-      image: blog.logo,
-      name: blog.title,
+      logo: blog.logo,
+      logoInverse: blog.logo_inverse,
+      title: blog.title,
       link: blog.url,
     }
   })
 
-  // console.log('caseStudyThumbs', caseStudyThumbs)
-
   return (
     <>
       <Head>
@@ -77,26 +75,39 @@ function Blog(props: any) {
       <NextSeo title="Case studies" description="Latest customers using Supabase" />
       <DefaultLayout>
         <div className="relative z-0 dark:bg-scale-200 bg-scale-200 overflow-hidden">
-          <div className="container mx-auto mt-40 px-8 sm:px-4 xl:px-20">
+          <div className="container mx-auto mt-44 px-8 sm:px-4 xl:px-20">
             <div className="mx-auto relative z-10">
-              <div className="mx-auto max-w-2xl text-center">
+              <motion.div
+                className="mx-auto max-w-2xl text-center"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0, transition: { duration: 0.5, easing: 'easeOut' } }}
+              >
                 <h1 className="text-scale-1200 mb-3 text-3xl">Case studies</h1>
                 <h2 className="text-scale-1100 text-xl">
-                  {/* Learn how teams behind everyone's favorite products use Radix to save time, boost
-                  quality, and set the bar for accessibility. */}
                   Discover how supabase is being used around the world to quickly create outstanding
                   products and set new industry standards.
                 </h2>
-              </div>
-              <div className="mx-auto mt-12 grid lg:grid-cols-1">
-                <ImageGrid
-                  images={caseStudyThumbs}
-                  mdCols={3}
-                  lgCols={4}
-                  padding={6}
-                  className="h-32"
-                  animated
-                />
+              </motion.div>
+              <div className="mx-auto my-12 md:my-20 grid grid-cols-12 gap-6 not-prose">
+                {caseStudyThumbs.map((caseStudy: any, i: number) => (
+                  <Link href={`${caseStudy.link}`} key={caseStudy.title} passHref>
+                    <motion.a
+                      className="col-span-12 md:col-span-4"
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0, transition: { delay: i / 10 } }}
+                    >
+                      <GlassPanel
+                        {...caseStudy}
+                        background={true}
+                        showIconBg={true}
+                        showLink={true}
+                        hasLightIcon
+                      >
+                        {caseStudy.description}
+                      </GlassPanel>
+                    </motion.a>
+                  </Link>
+                ))}
               </div>
             </div>
             <div

apps/www/public/case-studies-rss.xml

@@ -5,35 +5,35 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Mon, 13 Feb 2023 16:04:00 +0000</lastBuildDate>
+      <lastBuildDate>Mon, 13 Feb 2023 23:11:00 +0000</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
   <guid>https://supabase.com/case-studies/xendit</guid>
   <title>Xendit use Supabase and create a full solution shipped to production in less than one week.</title>
   <link>https://supabase.com/case-studies/xendit</link>
   <description>As a payment processor, Xendit are responsible for verifying that all transactions are legal.</description>
-  <pubDate>Mon, 13 Feb 2023 16:04:00 +0000</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:11:00 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/case-studies/replenysh</guid>
   <title>Replenysh uses Supabase to implement OTP in less than 24 hours</title>
   <link>https://supabase.com/case-studies/replenysh</link>
   <description>With Supabase, Replenysh gets a slick auth experience, reduces DevOps overhead, and continues to scale with Postgres.</description>
-  <pubDate>Mon, 13 Feb 2023 16:04:00 +0000</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:11:00 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/case-studies/mobbin</guid>
   <title>How Mobbin migrated 200,000 users from Firebase for a better authentication experience.</title>
   <link>https://supabase.com/case-studies/mobbin</link>
   <description>Mobbin helps over 200,000 creators globally search and view the latest design patterns from well-known apps.</description>
-  <pubDate>Mon, 13 Feb 2023 16:04:00 +0000</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:11:00 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/case-studies/epsilon3</guid>
   <title>Epsilon3 digitize paper-based procedures in the space industry using telemetry data, simplifying testing and operations.</title>
   <link>https://supabase.com/case-studies/epsilon3</link>
   <description>Epsilon3 uses Supabase to help teams execute secure and reliable operations in an industry where project spend runs into the billions.</description>
-  <pubDate>Mon, 13 Feb 2023 16:04:00 +0000</pubDate>
+  <pubDate>Mon, 13 Feb 2023 23:11:00 +0000</pubDate>
 </item>
 
     </channel>

apps/www/types/post.ts

@@ -20,6 +20,7 @@ type PostTypes = {
   path: string
   tags?: []
   logo?: string
+  logo_inverse?: string
   hideAuthor?: boolean
 }
 

packages/ui/src/components/GlassPanel/GlassPanel.tsx

@@ -1,5 +1,6 @@
 import { useTheme } from 'common/Providers'
 import * as React from 'react'
+import Image from 'next/image'
 
 interface Props {
   title: string
@@ -8,11 +9,10 @@ interface Props {
   children?: React.ReactNode
   header?: string
   background?: boolean
-  img?: string
+  logo?: string
+  logoInverse?: string
   hasLightIcon?: boolean
-
   showLink?: boolean
-
   showIconBg?: boolean
 }
 
@@ -23,12 +23,15 @@ const GlassPanel = ({
   children,
   header,
   background = true,
-  img,
+  logo,
+  logoInverse,
   hasLightIcon,
   showLink = false,
   showIconBg = false,
 }: Props) => {
   const { isDarkMode } = useTheme()
+  const showLogoInverse = logoInverse && isDarkMode
+  const showLogo = !showLogoInverse && logo
 
   const IconBackground: React.FC = (props) => (
     <div
@@ -41,6 +44,20 @@ const GlassPanel = ({
     </div>
   )
 
+  const LogoComponent = ({ logo, className }: { logo?: string; className?: string }) => (
+    <div className="relative box-content p-8 pb-0">
+      <div className="relative h-[40px] w-auto max-w-[100px]">
+        <Image
+          src={logo}
+          layout="fill"
+          objectFit="contain"
+          objectPosition="left"
+          className={className}
+        />
+      </div>
+    </div>
+  )
+
   return (
     <div
       className={[
@@ -57,6 +74,10 @@ const GlassPanel = ({
         'transition',
       ].join(' ')}
     >
+      {/* keep normal logo if no logoInverse present */}
+      {showLogo && <LogoComponent logo={logo} />}
+      {showLogoInverse && <LogoComponent logo={logoInverse} className="opacity-50" />}
+
       {header && (
         <img
           src={`${header}`}