feat: added case study (#11)

Author: ScruffyParrot

public/logos/collect.svg

@@ -1,56 +1,41 @@
 'use client'
 import { content } from '@/content/homepage/data'
-import Marquee from 'react-fast-marquee'
 import { motion } from 'motion/react'
 
 const LogoSection = () => {
+  const logos = content.logoSection.logos as any[]
   return (
-    <section className={'py-8 md:py-13'}>
+    <section className={'py-12 md:py-16'}>
       <div className={'container'}>
-        <div className={'w-full flex justify-center'}>
-          <div>
-            <motion.h2
-              initial={{ opacity: 0 }}
-              whileInView={{ opacity: 1 }}
-              transition={{ duration: 0.5, ease: 'easeInOut', delay: 0.2 }}
-              viewport={{ once: true }}
-              className={'text-xs! max-lg:text-center max-w-100'}>
-              {content.logoSection.title}
-            </motion.h2>
-          </div>
-        </div>
-      </div>
-      <div className={'w-full pt-8 overflow-hidden'}>
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.5, ease: 'easeInOut', delay: 0.2 }}
-          viewport={{ once: true }}>
-          <Marquee
-            autoFill={true}
-            pauseOnHover={true}
-            speed={100}
-            loop={0}
-            gradient={true}
-            gradientColor={'#F3F4F4'}
-            className={'flex'}>
-            {content.logoSection.logos.map((logo, index) => (
-              <div key={index}>
+        <div className={'w-full flex flex-col items-center gap-8'}>
+          <motion.h2
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 0.5, ease: 'easeInOut', delay: 0.2 }}
+            viewport={{ once: true }}
+            className={'text-xs! max-lg:text-center'}>
+            {content.logoSection.title}
+          </motion.h2>
+          <motion.div
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 0.5, ease: 'easeInOut', delay: 0.3 }}
+            viewport={{ once: true }}
+            className={'flex flex-wrap justify-center gap-10'}>
+            {logos.map((logo, index) => (
+              <a
+                key={index}
+                href={logo.href || '#'}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={'h-10 md:h-12 transition-opacity hover:opacity-70'}>
                 {logo.src && (
-                  <div className={'h-13 w-20 md:w-32 lg:w-40 px-4'}>
-                    <img
-                      src={logo.src}
-                      alt={logo.alt}
-                      width={300}
-                      height={300}
-                      className={'max-h-full max-w-full object-contain'}
-                    />
-                  </div>
+                  <img src={logo.src} alt={logo.alt} className={'h-full w-auto object-contain'} />
                 )}
-              </div>
+              </a>
             ))}
-          </Marquee>
-        </motion.div>
+          </motion.div>
+        </div>
       </div>
     </section>
   )

src/components/ui/sections/LogoSection.tsx

@@ -16,16 +16,12 @@ export const content = {
     ]
   },
   logoSection: {
-    title:
-      'Used by teams building agent payments, stablecoin settlement workflows, and always-on market plumbing.',
+    title: 'Case Studies',
     logos: [
       {
-        src: 'https://www.gstatic.com/marketing-cms/assets/images/86/b7/8533a624471c9666a0bb407af3ec/google-logo.png',
-        alt: 'Celestia'
-      },
-      {
-        src: '',
-        alt: 'Celestia'
+        src: '/logos/collect.svg',
+        alt: 'Collect',
+        href: 'https://drive.google.com/file/d/1ouTiEgSQfRDGZDUeWRr7nDlpR24JpMJ4/preview'
       }
     ]
   },
@@ -269,7 +265,7 @@ export const content = {
       {
         title: 'ev-abci',
         text: 'Compatibility layer for Cosmos SDK execution environment.'
-      },
+      }
     ],
     cta: [
       {

src/content/homepage/data.tsx

@@ -13,7 +13,7 @@ import EcosystemSection from '@/components/ui/sections/EcosystemSection'
   title="Evolve"
   description="A production stack on Celestia for teams building systems that need deterministic processing, policy controls, and always-on operations without being a tenant on shared chains.">
   <HomeHeroSection client:load />
-  <!-- <LogoSection client:only="react" /> -->
+  <LogoSection client:only="react" />
   <ValuePropSection client:only="react" />
   <ArchitectureSection client:only="react" />
   <UseCasesSection client:only="react" />