fix rbuild

src/components/UseCases.tsx

@@ -2,7 +2,6 @@
 
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
-import { useInView } from 'framer-motion'
 import {
   ArchiveBoxIcon,
   CodeBracketIcon,
@@ -16,6 +15,7 @@ import {
 
 import { Container } from '@/components/Container'
 import { H2, P, CT, CP } from '@/components/Texts'
+import { motion, useInView } from 'framer-motion'
 
 interface Review {
   title: string
@@ -94,7 +94,7 @@ function Review({
     >
       <blockquote className="text-gray-900">
         {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-[#2F3178] mb-2" })}
-        <CT as="h3" color="primary" className="mt-4 text-lg/6 font-semibold">
+        <CT color="primary" className="mt-4 text-lg/6 font-semibold">
           {title}
         </CT>
         <CP color="custom" className="mt-3 text-sm">{body}</CP>
@@ -213,14 +213,23 @@ function ReviewGrid() {
 }
 
 export function UseCases() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
   return (
     <section
       id="usecases"
+      ref={ref}
       aria-labelledby="usecases-title"
       className="py-12"
     >
       <Container className=''>
-        <div className="mx-auto max-w-2xl  lg:max-w-5xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-2xl  lg:max-w-5xl"
+        >
           <H2
             id="usecases-title" 
             color="primary"
@@ -231,7 +240,22 @@ export function UseCases() {
           <P className="mt-6 text-center" color="custom">
           Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
           </P>
-        </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 1, delay: 0.2 }}
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
+          />
+        </motion.div>
         <ReviewGrid />
       </Container>
     </section>