feat(auth): redesign initial screen with rotating globe panel behind flag

apps/api/src/gpu/routes/gpu.router.ts

@@ -160,6 +160,7 @@ const getGpuPricesRoute = createRoute({
   method: "get",
   path: "/v1/gpu-prices",
   summary: "Get a list of gpu models with their availability and pricing.",
+  operationId: "listGpuPrices",
   tags: ["Gpu"],
   security: SECURITY_NONE,
   cache: { maxAge: 120, staleWhileRevalidate: 300 },

apps/api/swagger/openapi.json

@@ -1947,6 +1947,7 @@
             "schema": {
               "type": "string",
               "format": "date",
+              "default": "2026-05-12",
               "description": "End date (YYYY-MM-DD). Defaults to today by UTC 23:59:59",
               "example": "2024-01-31"
             },
@@ -2072,6 +2073,7 @@
             "schema": {
               "type": "string",
               "format": "date",
+              "default": "2026-05-12",
               "description": "End date (YYYY-MM-DD). Defaults to today by UTC 23:59:59",
               "example": "2024-01-31"
             },
@@ -15349,6 +15351,7 @@
     "/v1/gpu-prices": {
       "get": {
         "summary": "Get a list of gpu models with their availability and pricing.",
+        "operationId": "listGpuPrices",
         "tags": [
           "Gpu"
         ],

apps/api/test/functional/__snapshots__/docs.spec.ts.snap

@@ -8155,6 +8155,7 @@ exports[`API Docs > GET /v1/doc > returns docs with all routes expected 1`] = `
     },
     "/v1/gpu-prices": {
       "get": {
+        "operationId": "listGpuPrices",
         "responses": {
           "200": {
             "content": {

apps/deploy-web/package.json

@@ -77,6 +77,7 @@
     "axios": "^1.7.2",
     "chain-registry": "^1.69.31",
     "clsx": "^2.0.0",
+    "cobe": "^2.0.1",
     "cockatiel": "^3.2.1",
     "date-fns": "^2.29.3",
     "dotenv": "^16.4.5",

apps/deploy-web/src/components/auth/AuthLayout/AuthLayout.spec.tsx

@@ -21,7 +21,7 @@ describe(AuthLayout.name, () => {
     return render(
       <NextThemeProvider defaultTheme={input?.theme ?? "light"}>
         <CustomThemeProvider>
-          <AuthLayout sidebar={<div>Sidebar</div>}>
+          <AuthLayout>
             <div>Children</div>
           </AuthLayout>
         </CustomThemeProvider>

apps/deploy-web/src/components/auth/AuthLayout/AuthLayout.tsx

@@ -1,16 +1,18 @@
 import type { ReactNode } from "react";
 import { cn } from "@akashnetwork/ui/utils";
+import { DollarSignIcon, RocketIcon, ZapIcon } from "lucide-react";
 
+import { AkashConsoleLogo } from "@src/components/icons/AkashConsoleLogo";
 import useCookieTheme from "@src/hooks/useTheme";
 
 interface Props {
-  sidebar: ReactNode;
   children: ReactNode;
 }
 
-export function AuthLayout({ sidebar, children }: Props) {
+export function AuthLayout({ children }: Props) {
   const theme = useCookieTheme();
   const sidebarClass = theme === "dark" ? "bg-[#171717] lg:bg-[hsl(var(--background))]" : "bg-[hsl(var(--background))] dark";
+
   return (
     <div className="relative flex h-screen">
       <div
@@ -24,7 +26,37 @@ export function AuthLayout({ sidebar, children }: Props) {
           color: "hsl(var(--foreground))"
         }}
       >
-        {sidebar}
+        <div className="hidden max-w-[576px] flex-col gap-6 px-4 lg:flex">
+          <AkashConsoleLogo size={{ width: 291, height: 32 }} />
+          <p>The fastest way to deploy an application on Akash.Network</p>
+          <div className="flex gap-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-md border border-[#E5E5E5] bg-white" style={{ color: "hsl(var(--background))" }}>
+              <ZapIcon />
+            </div>
+            <div className="flex-1">
+              <h5 className="font-semibold">Generous Free Trial</h5>
+              <p className="mt-1">$100 of cloud compute credits so you can test real workloads.</p>
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-md border border-[#E5E5E5] bg-white" style={{ color: "hsl(var(--background))" }}>
+              <RocketIcon />
+            </div>
+            <div className="flex-1">
+              <h5 className="font-semibold">Optimized for AI/ML</h5>
+              <p className="mt-1">Container native with a library of templates for leading open source AI models and applications.</p>
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-md border border-[#E5E5E5] bg-white" style={{ color: "hsl(var(--background))" }}>
+              <DollarSignIcon />
+            </div>
+            <div className="flex-1">
+              <h5 className="font-semibold">Cost Savings</h5>
+              <p className="mt-1">The most competitive prices for GPUs on-demand, anywhere on the internet.</p>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div className="relative z-10 flex w-full flex-1 items-center justify-center overflow-y-auto px-3 py-4 lg:p-0">{children}</div>