updates use cases

Author: ronggur

src/content.config.ts

@@ -342,7 +342,7 @@ const faq = defineCollection({
       category: z.string().optional(),
       draft: z.boolean().optional().default(false),
     }),
-});  
+});
 
 // Define use cases collections
 const useCases = defineCollection({

src/layouts/Layout.astro

@@ -195,4 +195,4 @@ const twitterImageUrl =
       });
     </script>
   </body>
-</html>
+</html>

src/pages/use-cases.astro

@@ -1,4 +1,5 @@
 ---
+import '@v1/styles/global.css';
 import Layout from '@layouts/Layout.astro';
 import Hero from '@components/Hero.astro';
 import Footer from '@components/Footer.astro';
@@ -32,33 +33,35 @@ const description = fm.description;
       description={page.data.description}
     />
 
-    <div class="section--block section--block--small-pad bg-navy relative">
-      <div class="absolute top-0 left-0 z-40 inline-block w-full">
-        <Image
-          src={ImageLightTrail}
-          alt="Sphere"
-          class="fade-in--pure relative h-auto w-full"
-          data-scroll-effect="parallax"
-          data-scroll-speed="0.1"
-          data-scroll-direction="down"
-          data-viewport-offset="200"
-          data-max-movement="50"
+    <div class="section--block section--block--pad bg-midnight-fjord relative">
+      <div class="max-width">
+        <div class="absolute top-0 left-0 z-40 inline-block w-full">
+          <Image
+            src={ImageLightTrail}
+            alt="Sphere"
+            class="fade-in--pure relative h-auto w-full"
+            data-scroll-effect="parallax"
+            data-scroll-speed="0.1"
+            data-scroll-direction="down"
+            data-viewport-offset="200"
+            data-max-movement="50"
+            data-reveal="fade-in--pure--visible"
+            data-reveal-delay="100"
+            data-reveal-immediate="true"
+          />
+        </div>
+        <div
+          class="fade-in--pure relative z-50 grid w-full max-w-none grid-cols-1 gap-8 md:grid-cols-2 md:gap-10 lg:grid-cols-3 lg:gap-12.5"
           data-reveal="fade-in--pure--visible"
-          data-reveal-delay="100"
           data-reveal-immediate="true"
-        />
-      </div>
-      <div
-        class="fade-in--pure relative z-50 grid w-full max-w-none grid-cols-1 gap-8 md:grid-cols-2 md:gap-10 lg:grid-cols-3 lg:gap-12.5"
-        data-reveal="fade-in--pure--visible"
-        data-reveal-immediate="true"
-        data-reveal-delay="100"
-      >
-        {
-          useCases.map((useCase) => (
-            <UcCard title={useCase.data.title} description={useCase.data.description || ''} />
-          ))
-        }
+          data-reveal-delay="100"
+        >
+          {
+            useCases.map((useCase) => (
+              <UcCard title={useCase.data.title} description={useCase.data.description || ''} />
+            ))
+          }
+        </div>
       </div>
     </div>
     <GlobalSection />

src/types/common.ts

@@ -177,4 +177,3 @@ export interface UcCardProps {
   slug: string;
 }
 // TOC interfaces removed - now using Astro's built-in MarkdownHeading type
-

src/v1/styles/components.css

@@ -511,7 +511,7 @@
   }
 
   .uc-card {
-    @apply bg-navy relative flex flex-col justify-between gap-8 border border-white px-9 py-8 md:gap-10 md:px-10 md:py-14 lg:gap-14 lg:px-12.5 lg:py-16;
+    @apply bg-midnight-fjord relative flex flex-col justify-between gap-8 border border-white px-9 py-8 md:gap-10 md:px-10 md:py-14 lg:gap-14 lg:px-12.5 lg:py-16;
     @apply transition-colors duration-300 ease-linear hover:border-white/60;
     @apply min-h-[300px] md:min-h-[574px];
   }