NOISSUE - Introduce dedicated use case pages with supporting components and updated navigation.

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/.source/

app/(marketing)/layout.tsx

@@ -16,7 +16,15 @@ export default function MarketingLayout({
             searchToggle={{ enabled: false }}
             links={[
                 { text: "Features", url: "/#architecture" },
-                { text: "Solutions", url: "/#solutions" },
+                {
+                    type: "menu",
+                    text: "Use Cases",
+                    items: [
+                        { text: "Financial Services", url: "/use-cases/financial-services" },
+                        { text: "Healthcare & Life Sciences", url: "/use-cases/healthcare" },
+                        { text: "Government & Defense", url: "/use-cases/government" },
+                    ],
+                },
                 { text: "Enterprise", url: "/#enterprise" },
                 { text: "Documentation", url: "/docs" },
                 { text: "Contact", url: "mailto:info@ultraviolet.rs" },

app/(marketing)/use-cases/[slug]/page.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { notFound } from "next/navigation";
+import { Metadata } from "next";
+import { getUseCaseBySlug, useCases } from "@/lib/use-cases";
+
+import UseCaseHero from "@/components/use-cases/UseCaseHero";
+import UseCaseChallenges from "@/components/use-cases/UseCaseChallenges";
+import UseCaseSolutions from "@/components/use-cases/UseCaseSolutions";
+import UseCaseDeployments from "@/components/use-cases/UseCaseDeployments";
+import UseCaseCTA from "@/components/use-cases/UseCaseCTA";
+
+interface UseCasePageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateStaticParams() {
+  return useCases.map((useCase) => ({
+    slug: useCase.slug,
+  }));
+}
+
+export async function generateMetadata({ params }: UseCasePageProps): Promise<Metadata> {
+  const resolvedParams = await params;
+  const useCase = getUseCaseBySlug(resolvedParams.slug);
+
+  if (!useCase) {
+    return {};
+  }
+
+  let keywords = ["Cube AI", "enterprise AI"];
+  if (useCase.slug === "financial-services") {
+    keywords = ["finance AI", "quantitative trading AI", "SEC compliance AI", "FINRA compliant LLM", "secure banking AI", "confidential computing finance"];
+  } else if (useCase.slug === "healthcare") {
+    keywords = ["healthcare AI", "HIPAA compliant LLM", "medical AI security", "PHI protection AI", "confidential computing healthcare", "AI for life sciences"];
+  } else if (useCase.slug === "government") {
+    keywords = ["government AI", "defense AI security", "FedRAMP compliant LLM", "IL4 compliant AI", "zero-trust AI", "sovereign cloud AI"];
+  }
+
+  return {
+    title: `${useCase.title} AI Solutions | Cube`,
+    description: useCase.heroDescription,
+    keywords,
+  };
+}
+
+export default async function UseCasePage({ params }: UseCasePageProps) {
+  const resolvedParams = await params;
+  const useCase = getUseCaseBySlug(resolvedParams.slug);
+
+  if (!useCase) {
+    notFound();
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <UseCaseHero 
+        title={useCase.title}
+        heroText={useCase.heroText}
+        heroDescription={useCase.heroDescription}
+        heroImage={useCase.heroImage}
+        heroImageAlt={useCase.heroImageAlt}
+      />
+
+      <UseCaseChallenges challenges={useCase.challenges} />
+
+      <UseCaseSolutions solutions={useCase.solutions} />
+
+      <UseCaseDeployments 
+        heading={useCase.deploymentsHeading}
+        description={useCase.deploymentsDescription}
+        deployments={useCase.deployments}
+        imageUrl={useCase.deploymentImage}
+        imageAlt={useCase.deploymentImageAlt}
+      />
+
+      <UseCaseCTA 
+        heading={useCase.ctaHeading}
+        description={useCase.ctaDescription}
+      />
+    </div>
+  );
+}

components/layout/Footer.tsx

@@ -7,7 +7,7 @@ const Footer = () => {
     return (
         <footer className="bg-muted/50 border-t py-16 text-base">
             <div className="container mx-auto px-4 md:px-6">
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+                <div className="grid grid-cols-1 md:grid-cols-5 gap-12">
                     <div className="md:col-span-1">
                         <Link href="https://www.ultraviolet.rs/" target="_blank" rel="noopener noreferrer" className="inline-block mb-4">
                             <Image
@@ -31,6 +31,15 @@ const Footer = () => {
                         </ul>
                     </div>
 
+                    <div>
+                        <h3 className="font-bold text-xl mb-4">Use Cases</h3>
+                        <ul className="space-y-2">
+                            <li><Link href="/use-cases/financial-services" className="text-muted-foreground hover:text-primary">Financial Services</Link></li>
+                            <li><Link href="/use-cases/healthcare" className="text-muted-foreground hover:text-primary">Healthcare & Life Sciences</Link></li>
+                            <li><Link href="/use-cases/government" className="text-muted-foreground hover:text-primary">Government & Defense</Link></li>
+                        </ul>
+                    </div>
+
                     <div>
                         <h3 className="font-bold text-xl mb-4">Connect</h3>
                         <ul className="space-y-2">