feat: completed all nav restructing and breadcrumbs cleanup

frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx

@@ -163,7 +163,7 @@ const Page = () => {
     );
 
   return (
-    <div className="container relative mx-auto max-w-7xl pb-12 text-white">
+    <div className="container relative mx-auto max-w-7xl text-white">
       <div className="relative">
         {view === IntegrationView.List ? (
           <motion.div

frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.utils.tsx

@@ -87,7 +87,7 @@ export const redirectForProviderAuth = (
           },
           search: {
             clientId: integrationOption.clientId,
-            state,
+            state
           }
         });
         break;

frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx

@@ -80,7 +80,7 @@ export const CloudIntegrationSection = ({
           <NoEnvironmentsBanner projectId={currentWorkspace.id} />
         )}
       </div>
-      <div className="m-4 mt-7 flex flex-col items-start justify-between px-2 text-xl">
+      <div className="flex flex-col items-start justify-between py-4 text-xl">
         {onViewActiveIntegrations && (
           <Button
             variant="link"
@@ -104,7 +104,7 @@ export const CloudIntegrationSection = ({
           />
         </div>
       </div>
-      <div className="mx-6 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
+      <div className="mx-2 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
         {isLoading &&
           Array.from({ length: 12 }).map((_, index) => (
             <Skeleton className="h-32" key={`cloud-integration-skeleton-${index + 1}`} />

frontend/src/pages/secret-manager/IntegrationsListPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx

@@ -12,11 +12,11 @@ export const FrameworkIntegrationSection = () => {
 
   return (
     <>
-      <div className="mx-4 mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
+      <div className="mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
         <h1 className="text-3xl font-semibold">{t("integrations.framework-integrations")}</h1>
         <p className="text-base text-gray-400">{t("integrations.click-to-setup")}</p>
       </div>
-      <div className="mx-6 mt-4 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
+      <div className="mx-2 mt-4 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
         {sortedFrameworks.map((framework) => (
           <a
             key={`framework-integration-${framework.slug}`}

frontend/src/pages/secret-manager/IntegrationsListPage/components/InfrastructureIntegrationSection/InfrastructureIntegrationSection.tsx

@@ -5,13 +5,13 @@ export const InfrastructureIntegrationSection = () => {
 
   return (
     <>
-      <div className="mx-4 mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
+      <div className="mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
         <h1 className="text-3xl font-semibold">Infrastructure Integrations</h1>
         <p className="text-base text-gray-400">
           Click on of the integration to read the documentation.
         </p>
       </div>
-      <div className="mx-6 grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
+      <div className="mx-2 grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
         {sortedIntegrations.map((integration) => (
           <a
             key={`framework-integration-${integration.slug}`}

frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx

@@ -5,5 +5,15 @@ import { IntegrationsListPage } from "./IntegrationsListPage";
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/"
 )({
-  component: IntegrationsListPage
+  component: IntegrationsListPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations"
+        }
+      ]
+    };
+  }
 });