feat(auth): redesign sign-in page (#3547)

* feat(auth): redesign sign-in page

Bring more brand presence to the auth surface while keeping behavior
unchanged. All flow states, query modes, providers, and redirects are
preserved.

Form column:
- Move the Kilo logo above the title and center the stack
- Drop redundant 'Kilo' from titles ('Welcome to Kilo Code' -> 'Welcome
  back', 'Create your Kilo Code account' -> 'Create your account')
- Tighten provider button primitive (h-10, bg-card, focus-visible ring,
  consistent svg sizing)
- Group Enterprise SSO and 'Get started' link into a centered secondary
  footer; brand-yellow on the get-started link as the column's single
  brand moment

Marketing column:
- Replace floating bullet text with a contained card surface (matches
  #0a0a0a left panel) sitting on a dithered shader background via
  @paper-design/shaders-react (paused under prefers-reduced-motion)
- New 'One coding agent / Every model / No subscription' headline with
  brand-yellow accent on the closing line
- Convert paragraph bullets into structured rows with brand-yellow
  Check icons
- Add 'Trusted by teams at' caption above the customer logo strip

Layout:
- Lock both panes to a true 50/50 split on xl+
- Drop the divider border between the panes
- Force the left main background to #0a0a0a

Logos:
- Refresh all five SVGs to a uniform 154x51 viewBox
- Strip background plates and hardcoded path fills so theming via CSS
  works
- Render at fill-foreground with row-level opacity-75 for subtle
  presence; entrance animation removed

* fix(auth): respect prefers-reduced-motion and avoid eager video preload

- AuthMarketingAside: use `reduceMotion === true` so the shader speed
  doesn't briefly animate while `useReducedMotion()` is null during SSR
  and pre-hydration.
- AnimatedLogoMark: same strict comparison plus skip hover playback when
  reduced motion is set.
- AnimatedLogoMark: switch the kilo-anim.mp4 video to `preload="none"`
  so it isn't fetched on every mount; the mark is now used across
  multiple sign-in flow states.

* fix(auth): show static logo mark before hover loads video

Layer the SVG underneath the video so the mark renders immediately on
mount. The video element keeps preload="none" and fades in on hover
once it has frames. Previously the mark was invisible until the user
hovered.

* fix(auth): render logo mark in white via CSS invert

The shared public asset `kilo-v1.svg` hardcodes `fill: #231f20` in an
internal style block, which renders almost invisibly on the dark
sign-in surface. Apply Tailwind's `invert` filter so the mark renders
white without modifying the shared asset (other surfaces use it on
light backgrounds).

* refactor(auth): simplify AnimatedLogoMark to a static, non-interactive image

Drop the hover video, the link wrapper, and all client-side hooks.
The mark on the sign-in page only needs to identify the brand; it
doesn't need to play on hover or link out. Resulting component is a
plain server component rendering the inverted SVG.

* feat(auth): switch sign-in layout to 60/40 split

Give the form column more room (3/5) and let the marketing aside take
the remaining 2/5 on xl+ viewports. Below xl the aside stays hidden,
so the form still fills the visible row.

Author: Drixled

apps/web/package.json

@@ -70,6 +70,7 @@
     "@opentelemetry/api-logs": "0.208.0",
     "@opentelemetry/sdk-logs": "0.212.0",
     "@opentelemetry/sdk-metrics": "2.6.1",
+    "@paper-design/shaders-react": "^0.0.76",
     "@qdrant/js-client-rest": "1.17.0",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-avatar": "1.1.11",

apps/web/src/app/users/layout.tsx

@@ -1,15 +1,10 @@
-import { AnimatedLogo } from '@/components/AnimatedLogo';
 import { PageContainer } from '@/components/layouts/PageContainer';
 
 export default function SignInUpLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="bg-background h-full w-full">
       <PageContainer fullBleed>
-        <div className="flex min-h-screen flex-col justify-between">
-          <AnimatedLogo />
-          <div>{children}</div>
-          <div />
-        </div>
+        <div className="flex min-h-screen flex-col">{children}</div>
       </PageContainer>
     </div>
   );

apps/web/src/app/users/sign_in/page.tsx

@@ -20,13 +20,7 @@ export default async function SignInPage({
           error={error}
           isSignUp={isSignUp}
           allowFakeLogin={allow_fake_login}
-          title={
-            ssoMode
-              ? 'Enterprise SSO'
-              : isSignUp
-                ? 'Create your Kilo Code account'
-                : 'Welcome to Kilo Code'
-          }
+          title={ssoMode ? 'Enterprise SSO' : isSignUp ? 'Create your account' : 'Welcome back'}
           subtitle={
             ssoMode
               ? "Enter your work email address to sign in with your organization's Single Sign-On"

apps/web/src/components/AnimatedLogoMark.tsx

@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import { cn } from '@/lib/utils';
+
+type AnimatedLogoMarkProps = {
+  size?: number;
+  className?: string;
+};
+
+/**
+ * Just the Kilo mark, without the "Kilo" wordmark.
+ * Use when the wordmark would duplicate adjacent text (e.g., a page title).
+ *
+ * Static, non-interactive — no link, no animation.
+ */
+export function AnimatedLogoMark({ size = 48, className }: AnimatedLogoMarkProps) {
+  return (
+    <span className={cn('inline-flex items-center', className)} aria-label="Kilo Code">
+      {/* `kilo-v1.svg` ships with a dark `#231f20` fill; invert it for dark surfaces. */}
+      <Image
+        src="/kilo-v1.svg"
+        alt=""
+        width={size}
+        height={size}
+        priority
+        className="invert"
+        aria-hidden
+      />
+    </span>
+  );
+}

apps/web/src/components/LogosSection.tsx

@@ -1,77 +1,47 @@
-'use client';
 import MetaLogo from '@/components/assets/MetaLogo';
 import AmazonLogo from '@/components/assets/AmazonLogo';
 import AirbnbLogo from '@/components/assets/AirbnbLogo';
 import PayPalLogo from '@/components/assets/PayPalLogo';
 import SquareLogo from '@/components/assets/SquareLogo';
 import { cn } from '@/lib/utils';
-import { motion } from 'motion/react';
 
 type CompanyProps = {
   name: string;
-  logo: string | React.ReactNode;
-  className?: string;
+  logo: React.ReactNode;
 };
 
 const companies: CompanyProps[] = [
-  {
-    name: 'Meta',
-    logo: <MetaLogo />,
-  },
-  {
-    name: 'Amazon',
-    logo: <AmazonLogo />,
-  },
-  {
-    name: 'Airbnb',
-    logo: <AirbnbLogo />,
-  },
-  {
-    name: 'PayPal',
-    logo: <PayPalLogo />,
-  },
-  {
-    name: 'Square',
-    logo: <SquareLogo />,
-  },
+  { name: 'Meta', logo: <MetaLogo /> },
+  { name: 'Amazon', logo: <AmazonLogo /> },
+  { name: 'Airbnb', logo: <AirbnbLogo /> },
+  { name: 'PayPal', logo: <PayPalLogo /> },
+  { name: 'Square', logo: <SquareLogo /> },
 ];
 
 type LogosSectionProps = {
-  title?: string;
   className?: string;
 };
 
 export default function LogosSection({ className }: LogosSectionProps) {
   return (
-    <div className={cn('flex flex-col gap-4 pb-10', className)}>
-      <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6 lg:gap-8">
-        {companies.slice(0, 7).map((company, index) => (
-          <motion.div
-            key={index}
-            tabIndex={-1}
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.3, delay: index * 0.1 }}
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            className="group/logo flex items-center justify-center"
+    <div className={cn('flex flex-col', className)}>
+      <div className="flex w-full items-center justify-between gap-2 opacity-75">
+        {companies.map(company => (
+          <div
+            key={company.name}
+            aria-label={company.name}
+            className={cn(
+              // Equal-flex box so every logo gets the same horizontal share of the row,
+              // and shrinks together as the container narrows. Tall enough that
+              // squarer marks (Meta) read at a similar visual weight to wider ones (Square).
+              'flex h-8 min-w-0 flex-1 items-center justify-center',
+              // SVG fills box up to caps; aspect ratio preserved.
+              '[&_svg]:h-auto [&_svg]:max-h-7 [&_svg]:w-auto [&_svg]:max-w-full',
+              '[&_svg_path]:fill-foreground'
+            )}
           >
-            <div
-              className={cn(
-                'flex items-center justify-center transition-all duration-300',
-                'max-h-12 max-w-20',
-                'grayscale group-hover/logo:grayscale-0',
-                'opacity-60 group-hover/logo:opacity-100',
-                '[&_svg]:h-auto [&_svg]:max-h-full [&_svg]:w-auto [&_svg]:max-w-full',
-                '[&_svg_path]:transition-all [&_svg_path]:duration-300',
-                '[&_svg_path]:fill-[#A1A1A1]',
-                'group-hover/logo:[&_svg_path]:fill-brand-primary'
-              )}
-            >
-              {company.logo}
-            </div>
-          </motion.div>
+            {company.logo}
+          </div>
         ))}
       </div>
     </div>

apps/web/src/components/assets/AirbnbLogo.tsx

@@ -1,24 +1,17 @@
 export default function MetaLogo() {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="108"
-      height="48"
-      viewBox="0 0 108 48"
+      width="125"
+      height="51"
+      viewBox="0 0 125 51"
       fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_1047_433)">
-        <path d="M40.1909 9.36279H44.2699L51.2057 21.8967L58.1414 9.3628H62.1321V29.9584H58.8041V14.1734L52.7224 25.1038H49.6006L43.5189 14.1734V29.9584H40.1909V9.36279Z" />
-        <path d="M72.8668 30.3262C71.3254 30.3262 69.9707 29.9854 68.8025 29.3037C67.6342 28.6221 66.7237 27.6782 66.0709 26.4719C65.418 25.2655 65.0916 23.8826 65.0917 22.3233C65.0917 20.7444 65.4107 19.3468 66.0488 18.1306C66.6869 16.9147 67.5729 15.9633 68.7068 15.2766C69.8407 14.5903 71.144 14.247 72.6165 14.2468C74.0791 14.2468 75.3382 14.5925 76.3936 15.2839C77.4487 15.9755 78.2611 16.944 78.8306 18.1894C79.3999 19.4351 79.6846 20.8964 79.6847 22.5734V23.4853H68.3902C68.5964 24.7409 69.1045 25.729 69.9144 26.4497C70.7243 27.1706 71.7477 27.531 72.9846 27.5309C73.9761 27.5309 74.8301 27.3838 75.5469 27.0896C76.2634 26.7954 76.9359 26.3492 77.5643 25.751L79.3314 27.9134C77.5739 29.5221 75.419 30.3263 72.8668 30.3262ZM75.2965 18.1085C74.5994 17.3975 73.6864 17.042 72.5576 17.0419C71.458 17.0419 70.5376 17.4048 69.7965 18.1306C69.0552 18.8564 68.5864 19.8322 68.3902 21.0581H76.4893C76.3911 19.8027 75.9935 18.8195 75.2965 18.1085Z" />
-        <path d="M83.7198 17.3364H80.6569V14.6148H83.7198V10.1133H86.93V14.6148H91.5832V17.3364H86.93V24.2359C86.93 25.3833 87.1263 26.2022 87.519 26.6926C87.9115 27.1831 88.584 27.4283 89.5365 27.4281C89.9584 27.4281 90.3167 27.411 90.6114 27.3766C90.9059 27.3424 91.2299 27.2959 91.5832 27.2369V29.929C91.18 30.0455 90.7692 30.134 90.3537 30.1939C89.8783 30.2638 89.3984 30.2982 88.9179 30.2968C85.4524 30.2968 83.7197 28.404 83.7198 24.6184V17.3364Z" />
-        <path d="M108.312 29.9583H105.161V27.8105C104.601 28.6148 103.889 29.2351 103.025 29.6714C102.162 30.1077 101.18 30.3259 100.08 30.3262C98.7256 30.3262 97.5255 29.9804 96.4799 29.2889C95.4344 28.5975 94.6122 27.6462 94.0134 26.435C93.4145 25.2238 93.1151 23.8385 93.1151 22.2792C93.1151 20.71 93.4195 19.3222 94.0282 18.1158C94.6367 16.9096 95.4785 15.9632 96.5536 15.2766C97.6285 14.5903 98.863 14.247 100.257 14.2468C101.307 14.2468 102.25 14.4504 103.084 14.8574C103.908 15.2552 104.62 15.8488 105.161 16.5859V14.6147H108.312V29.9583ZM105.102 19.9842C104.758 19.1114 104.216 18.4223 103.475 17.9172C102.733 17.4122 101.877 17.1597 100.905 17.1597C99.5304 17.1597 98.4358 17.6206 97.6212 18.5425C96.8062 19.4644 96.3988 20.7099 96.399 22.2792C96.399 23.8583 96.7917 25.1087 97.577 26.0305C98.3623 26.9524 99.4274 27.4134 100.772 27.4133C101.764 27.4133 102.647 27.1583 103.423 26.6483C104.198 26.1385 104.758 25.452 105.102 24.5887V19.9842Z" />
-        <path d="M24.1111 8.66675C21.435 8.66675 19.343 10.6804 17.4493 13.2383C14.847 9.92808 12.6706 8.66675 10.0662 8.66675C4.75636 8.66675 0.687988 15.5702 0.687988 22.8771C0.687988 27.4495 2.90224 30.3334 6.61107 30.3334C9.28044 30.3334 11.2003 29.0762 14.6132 23.1162C14.6132 23.1162 16.0359 20.6063 17.0146 18.8773C17.3576 19.4305 17.7188 20.0266 18.0982 20.6656L19.6987 23.3553C22.8163 28.5671 24.5533 30.3334 27.7008 30.3334C31.3139 30.3334 33.3247 27.4101 33.3247 22.7426C33.3247 15.092 29.1646 8.66675 24.1111 8.66675ZM12.0106 21.5024C9.24354 25.8357 8.28628 26.807 6.74568 26.807C5.16021 26.807 4.2179 25.4164 4.2179 22.9369C4.2179 17.6323 6.86534 12.2081 10.0213 12.2081C11.7304 12.2081 13.1586 13.1942 15.3462 16.3229C13.269 19.506 12.0106 21.5024 12.0106 21.5024ZM22.454 20.9569L20.5405 17.7686C20.0227 16.9273 19.525 16.1528 19.0475 15.4453C20.7722 12.7861 22.1948 11.461 23.8867 11.461C27.4017 11.461 30.2136 16.6311 30.2136 22.9817C30.2136 25.4024 29.42 26.807 27.7756 26.807C26.1995 26.807 25.4466 25.7671 22.454 20.9569Z" />
-      </g>
-      <defs>
-        <clipPath id="clip0_1047_433">
-          <rect width="108" height="48" fill="white" />
-        </clipPath>
-      </defs>
+      <path d="M49.4386 15.6425H53.3045L59.8779 27.2123L66.4511 15.6425H70.2333V34.6538H67.0792V20.0831L61.3153 30.1727H58.3566L52.5927 20.0831V34.6538H49.4386V15.6425Z" />
+      <path d="M80.407 34.9934C78.9462 34.9934 77.6623 34.6788 76.5551 34.0495C75.4479 33.4203 74.5849 32.549 73.9663 31.4355C73.3475 30.3219 73.0381 29.0454 73.0382 27.6061C73.0382 26.1486 73.3406 24.8585 73.9453 23.7359C74.5501 22.6135 75.3898 21.7353 76.4644 21.1014C77.5391 20.4679 78.7743 20.151 80.1698 20.1508C81.556 20.1508 82.7493 20.4699 83.7495 21.1081C84.7495 21.7465 85.5194 22.6405 86.0592 23.7901C86.5987 24.94 86.8686 26.2889 86.8687 27.8369V28.6787H76.1644C76.3598 29.8377 76.8413 30.7498 77.6089 31.415C78.3765 32.0805 79.3464 32.4132 80.5187 32.4131C81.4584 32.4131 82.2677 32.2773 82.9471 32.0057C83.6261 31.7341 84.2635 31.3223 84.8591 30.7701L86.5338 32.7662C84.8682 34.2511 82.8259 34.9934 80.407 34.9934ZM82.7098 23.7155C82.0491 23.0592 81.1838 22.731 80.114 22.7309C79.0719 22.7309 78.1995 23.0659 77.4972 23.7359C76.7946 24.4058 76.3503 25.3066 76.1644 26.4382H83.8402C83.7472 25.2793 83.3703 24.3718 82.7098 23.7155Z" />
+      <path d="M90.6929 23.0028H87.7901V20.4905H90.6929V16.3353H93.7353V20.4905H98.1454V23.0028H93.7353V29.3715C93.7353 30.4307 93.9214 31.1866 94.2936 31.6393C94.6656 32.092 95.3029 32.3184 96.2056 32.3182C96.6055 32.3182 96.9451 32.3024 97.2244 32.2706C97.5035 32.2391 97.8105 32.1962 98.1454 32.1417V34.6267C97.7633 34.7342 97.3739 34.8159 96.9801 34.8712C96.5296 34.9358 96.0748 34.9675 95.6194 34.9662C92.335 34.9662 90.6928 33.219 90.6929 29.7246V23.0028Z" />
+      <path d="M114 34.6538H111.014V32.6712C110.483 33.4136 109.808 33.9862 108.989 34.3889C108.171 34.7917 107.241 34.9931 106.198 34.9934C104.915 34.9934 103.777 34.6742 102.786 34.0358C101.795 33.3976 101.016 32.5195 100.449 31.4015C99.881 30.2834 99.5972 29.0047 99.5972 27.5653C99.5972 26.1169 99.8857 24.8358 100.463 23.7222C101.039 22.6088 101.837 21.7352 102.856 21.1014C103.875 20.4679 105.045 20.151 106.366 20.1508C107.361 20.1508 108.255 20.3388 109.045 20.7144C109.826 21.0816 110.501 21.6296 111.014 22.31V20.4904H114V34.6538ZM110.958 25.4469C110.632 24.6412 110.118 24.0051 109.416 23.5389C108.713 23.0727 107.901 22.8397 106.98 22.8397C105.677 22.8397 104.64 23.2651 103.868 24.1161C103.095 24.9671 102.709 26.1168 102.71 27.5653C102.71 29.023 103.082 30.1772 103.826 31.0281C104.57 31.8791 105.58 32.3046 106.854 32.3045C107.794 32.3045 108.631 32.0691 109.366 31.5984C110.101 31.1278 110.632 30.4941 110.958 29.6972V25.4469Z" />
+      <path d="M34.1991 15C31.6629 15 29.6802 16.8588 27.8854 19.2199C25.4191 16.1643 23.3564 15 20.8881 15C15.8558 15 12 21.3724 12 28.1173C12 32.3379 14.0985 35 17.6136 35C20.1434 35 21.963 33.8395 25.1975 28.338C25.1975 28.338 26.5459 26.0211 27.4734 24.4251C27.7985 24.9358 28.1408 25.486 28.5004 26.0759L30.0173 28.5587C32.972 33.3696 34.6182 35 37.6012 35C41.0255 35 42.9312 32.3016 42.9312 27.9931C42.9312 20.931 38.9885 15 34.1991 15ZM22.7309 26.8483C20.1085 30.8483 19.2012 31.7449 17.7411 31.7449C16.2385 31.7449 15.3455 30.4612 15.3455 28.1725C15.3455 23.2759 17.8545 18.2689 20.8456 18.2689C22.4654 18.2689 23.8189 19.1792 25.8922 22.0672C23.9236 25.0055 22.7309 26.8483 22.7309 26.8483ZM32.6286 26.3448L30.8151 23.4017C30.3244 22.6251 29.8527 21.9102 29.4001 21.2571C31.0347 18.8025 32.383 17.5793 33.9864 17.5793C37.3178 17.5793 39.9827 22.3517 39.9827 28.2138C39.9827 30.4483 39.2306 31.7449 37.6721 31.7449C36.1784 31.7449 35.4648 30.7849 32.6286 26.3448Z" />
     </svg>
   );
 }