chore(repo): create branch for layout collaboration

apps/apollo-vertex/app/_meta.ts

@@ -4,4 +4,5 @@ export default {
   "shadcn-components": "Shadcn Components",
   "vertex-components": "Vertex Components",
   themes: "Themes",
+  "page-layouts": "Page Layouts",
 };

apps/apollo-vertex/app/page-layouts/dashboard/page.mdx

@@ -0,0 +1,15 @@
+import { DashboardLayoutTemplate } from '@/templates/DashboardLayoutTemplate';
+
+# Dashboard
+
+This is a blank dashboard page layout with the shell component.
+
+<div className="not-prose my-8 rounded-lg overflow-hidden" style={{ height: '600px' }}>
+  <div className="[&_.h-screen]:!h-full h-full">
+    <DashboardLayoutTemplate />
+  </div>
+</div>
+
+## Usage
+
+This page provides a starting point for building dashboard layouts within the Apollo Vertex design system.

apps/apollo-vertex/app/page-layouts/detail/page.mdx

@@ -0,0 +1,15 @@
+import { DetailLayoutTemplate } from '@/templates/DetailLayoutTemplate';
+
+# Detail
+
+This is a blank detail page layout with the shell component.
+
+<div className="not-prose my-8 rounded-lg overflow-hidden" style={{ height: '600px' }}>
+  <div className="[&_.h-screen]:!h-full h-full">
+    <DetailLayoutTemplate />
+  </div>
+</div>
+
+## Usage
+
+This page provides a starting point for building detail view layouts within the Apollo Vertex design system.

apps/apollo-vertex/app/page-layouts/list/page.mdx

@@ -0,0 +1,15 @@
+import { ListLayoutTemplate } from '@/templates/ListLayoutTemplate';
+
+# List
+
+This is a blank list page layout with the shell component.
+
+<div className="not-prose my-8 rounded-lg overflow-hidden" style={{ height: '600px' }}>
+  <div className="[&_.h-screen]:!h-full h-full">
+    <ListLayoutTemplate />
+  </div>
+</div>
+
+## Usage
+
+This page provides a starting point for building list view layouts within the Apollo Vertex design system.

apps/apollo-vertex/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/apollo-vertex/registry/dropdown-menu/dropdown-menu.tsx

@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10001] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}

apps/apollo-vertex/registry/select/select.tsx

@@ -62,7 +62,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[10001] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,

apps/apollo-vertex/registry/shell/internal/shell-layout.tsx

@@ -9,6 +9,7 @@ interface ShellLayoutProps {
   companyName: string;
   productName: string;
   companyLogo?: CompanyLogo;
+  backgroundMode?: string;
 }
 
 function DarkGradientBackground() {
@@ -275,17 +276,119 @@ export function ShellLayout({
   companyName,
   productName,
   companyLogo,
+  backgroundMode = "flat",
 }: PropsWithChildren<ShellLayoutProps>) {
   return (
-    <div className="h-screen overflow-hidden flex bg-sidebar">
+    <div className="h-screen pl-3 overflow-hidden flex gap-2 bg-sidebar">
       <Sidebar
         companyName={companyName}
         productName={productName}
         companyLogo={companyLogo}
       />
-      <main className="flex-1 flex flex-col overflow-hidden relative">
-        <GradientBackground />
-        <div className="flex-1 overflow-y-auto custom-scrollbar">
+      <main
+        className="flex-1 flex flex-col overflow-hidden relative"
+        style={{
+          backgroundColor: backgroundMode === "expressive" ? "#190D33" : undefined,
+        }}
+      >
+        {/* Gradient Background for flat mode */}
+        {backgroundMode === "flat" && <GradientBackground />}
+
+        {/* Expressive Background Elements */}
+        {backgroundMode === "expressive" && (
+          <>
+            {/* Bg container */}
+            <div
+              className="absolute overflow-hidden pointer-events-none transition-opacity duration-300"
+              style={{
+                width: '2184.47px',
+                height: '1494.44px',
+                left: '-208px',
+                top: '-252px',
+                opacity: backgroundMode === "expressive" ? 1 : 0,
+              }}
+            >
+              {/* Vector 210 */}
+              <div
+                className="absolute transition-opacity duration-300"
+                style={{
+                  width: '807px',
+                  height: '789px',
+                  left: '650px',
+                  top: '257px',
+                  background: 'rgba(78, 9, 77, 0.6)',
+                  filter: 'blur(90px)',
+                  opacity: backgroundMode === "expressive" ? 1 : 0,
+                  transitionDelay: '0ms',
+                }}
+              />
+
+              {/* Vector 212 */}
+              <div
+                className="absolute transition-opacity duration-300"
+                style={{
+                  width: '1309px',
+                  height: '737px',
+                  left: '-70px',
+                  top: '-46px',
+                  background: '#223045',
+                  filter: 'blur(60px)',
+                  opacity: backgroundMode === "expressive" ? 1 : 0,
+                  transitionDelay: '50ms',
+                }}
+              />
+
+              {/* Vector 211 */}
+              <div
+                className="absolute transition-opacity duration-300"
+                style={{
+                  width: '1260px',
+                  height: '800px',
+                  left: '-208px',
+                  top: '0px',
+                  background: 'rgba(244, 66, 35, 0.27)',
+                  filter: 'blur(90px)',
+                  transform: 'rotate(23.94deg)',
+                  opacity: backgroundMode === "expressive" ? 1 : 0,
+                  transitionDelay: '100ms',
+                }}
+              />
+
+              {/* Vector 213 */}
+              <div
+                className="absolute transition-opacity duration-300"
+                style={{
+                  width: '1408px',
+                  height: '523.77px',
+                  left: '484px',
+                  top: '-252px',
+                  background: 'linear-gradient(257.56deg, rgba(152, 166, 184, 0.5) 36.7%, rgba(68, 74, 82, 0.5) 88.5%)',
+                  filter: 'blur(100px)',
+                  transform: 'rotate(-13.86deg)',
+                  opacity: backgroundMode === "expressive" ? 1 : 0,
+                  transitionDelay: '150ms',
+                }}
+              />
+            </div>
+
+            {/* CoverLayer */}
+            <div
+              className="absolute pointer-events-none transition-opacity duration-300"
+              style={{
+                width: '1440px',
+                height: '813px',
+                left: '0px',
+                top: '0px',
+                background: 'rgba(25, 13, 51, 0.79)',
+                mixBlendMode: 'overlay',
+                opacity: backgroundMode === "expressive" ? 1 : 0,
+                transitionDelay: '200ms',
+              }}
+            />
+          </>
+        )}
+
+        <div className="flex-1 overflow-y-auto custom-scrollbar relative z-10">
           {children}
         </div>
       </main>