feat(landing): new landing page (#1219)

* update infra and remove railway

* feat(landing): background; font; metadata; nav

* finished navbar ui

* completed hero UI

* hero heading UI/UX

* updated icon descriptions

* canvas improvements

* canvas improvements

* updated canvas; adjusted background

* removed gsap; adjusted canvas height

* added templates outline

* feat(landing, landing-2): Update background, hero components, nav, integrations, pricing, templates, testimonials, tailwind config

* feat(landing, landing-2): Update background, footer, hero, index components, integrations, landing-pricing, landing templates, footer in sections, icons, middleware

* improvement(landing): optimized html

* feat(landing): update background, footer, hero, integrations, landing-enterprise, landing-pricing, landing-templates, nav, add github-stars route

* feat(landing): added onclicks

* feat(landing): commented out templates

* fix: reset environment

* fixed build

* feat(landing): updated background, footer, index, integrations, landing-pricing, nav, testimonials, landing page, fonts, environment

* feat(landing): swapped integrations and pricing

* navigation for new landing

* login/signup/terms/privacy preliminary changes, as well as navigation setup

* feat(landing,nav,hero,integrations,footer,testimonials,background,structured-data): updates and additions across components

* feat(landing): updated terms and privacy

* feat(auth): adjusted background

* feat(auth): signup and login complete

* feat(auth): completed all flows ui/ux

* fix: testing and build

* feat(landing, auth): update nav and login tests

* fix(ui): update auth navigation component (149 chars)

* restore scripts dir

* revert back to old globals.css brand primary color, updated invite page

* Revert "update infra and remove railway"

This reverts commit abfa2f8.

* remove logos

* add gh stars action for reuse on landing + cht

---------

Co-authored-by: waleedlatif1 <[email protected]>

Author: emir-karabeg

apps/sim/app/(auth)/components/auth-background-svg.tsx

@@ -0,0 +1,44 @@
+export default function AuthBackgroundSVG() {
+  return (
+    <svg
+      aria-hidden='true'
+      className='pointer-events-none fixed inset-0 h-full w-full'
+      style={{ zIndex: 5 }}
+      viewBox='0 0 1880 960'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      preserveAspectRatio='xMidYMid slice'
+    >
+      {/* Right side paths - extended to connect */}
+      <path
+        d='M1393.53 42.8889C1545.99 173.087 1688.28 339.75 1878.44 817.6'
+        stroke='#E7E4EF'
+        strokeWidth='2'
+      />
+      <path d='M1624.21 960L1625.78 0' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M1832.67 715.81L1880 716.031' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M1393.4 40V0' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='1393.03' cy='40.0186' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='1625.28' cy='303.147' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='1837.37' cy='715.81' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+
+      {/* Left side paths - extended to connect */}
+      <path
+        d='M160 157.764C319.811 136.451 417.278 102.619 552.39 0'
+        stroke='#E7E4EF'
+        strokeWidth='2'
+      />
+      <path d='M310.22 803.025V0' stroke='#E7E4EF' strokeWidth='2' />
+      <path
+        d='M160 530.184C256.142 655.353 308.338 749.141 348.382 960'
+        stroke='#E7E4EF'
+        strokeWidth='2'
+      />
+      <path d='M160 157.764V960' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M-50 157.764L160 157.764' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='160' cy='157.764' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='310.22' cy='803.025' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='160' cy='530.184' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+    </svg>
+  )
+}

apps/sim/app/(auth)/components/auth-background.tsx

@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils'
+import AuthBackgroundSVG from './auth-background-svg'
+
+type AuthBackgroundProps = {
+  className?: string
+  children?: React.ReactNode
+}
+
+export default function AuthBackground({ className, children }: AuthBackgroundProps) {
+  return (
+    <div className={cn('relative min-h-screen w-full overflow-hidden', className)}>
+      <AuthBackgroundSVG />
+      <div className='relative z-20'>{children}</div>
+    </div>
+  )
+}

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { Button } from '@/components/ui/button'
 import { client } from '@/lib/auth-client'
+import { inter } from '@/app/fonts/inter'
 
 interface SocialLoginButtonsProps {
   githubAvailable: boolean
@@ -92,24 +93,24 @@ export function SocialLoginButtons({
   const githubButton = (
     <Button
       variant='outline'
-      className='w-full border-neutral-700 bg-neutral-900 text-white hover:bg-neutral-800 hover:text-white'
+      className='w-full rounded-[10px] shadow-sm hover:bg-gray-50'
       disabled={!githubAvailable || isGithubLoading}
       onClick={signInWithGithub}
     >
-      <GithubIcon className='mr-2 h-4 w-4' />
-      {isGithubLoading ? 'Connecting...' : 'Continue with GitHub'}
+      <GithubIcon className='!h-[18px] !w-[18px] mr-1' />
+      {isGithubLoading ? 'Connecting...' : 'GitHub'}
     </Button>
   )
 
   const googleButton = (
     <Button
       variant='outline'
-      className='w-full border-neutral-700 bg-neutral-900 text-white hover:bg-neutral-800 hover:text-white'
+      className='w-full rounded-[10px] shadow-sm hover:bg-gray-50'
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
-      <GoogleIcon className='mr-2 h-4 w-4' />
-      {isGoogleLoading ? 'Connecting...' : 'Continue with Google'}
+      <GoogleIcon className='!h-[18px] !w-[18px] mr-1' />
+      {isGoogleLoading ? 'Connecting...' : 'Google'}
     </Button>
   )
 
@@ -120,9 +121,9 @@ export function SocialLoginButtons({
   }
 
   return (
-    <div className='grid gap-3'>
-      {githubAvailable && githubButton}
+    <div className={`${inter.className} grid gap-3 font-light`}>
       {googleAvailable && googleButton}
+      {githubAvailable && githubButton}
     </div>
   )
 }

apps/sim/app/(auth)/layout.tsx

@@ -1,48 +1,42 @@
 'use client'
 
-import Image from 'next/image'
-import Link from 'next/link'
-import { useBrandConfig } from '@/lib/branding/branding'
-import { GridPattern } from '@/app/(landing)/components/grid-pattern'
+import { useEffect } from 'react'
+import Nav from '@/app/(landing)/components/nav/nav'
+import AuthBackground from './components/auth-background'
+
+// Helper to detect if a color is dark
+function isColorDark(hexColor: string): boolean {
+  const hex = hexColor.replace('#', '')
+  const r = Number.parseInt(hex.substr(0, 2), 16)
+  const g = Number.parseInt(hex.substr(2, 2), 16)
+  const b = Number.parseInt(hex.substr(4, 2), 16)
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  return luminance < 0.5
+}
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
-  const brand = useBrandConfig()
+  useEffect(() => {
+    // Check if brand background is dark and add class accordingly
+    const rootStyle = getComputedStyle(document.documentElement)
+    const brandBackground = rootStyle.getPropertyValue('--brand-background-hex').trim()
 
+    if (brandBackground && isColorDark(brandBackground)) {
+      document.body.classList.add('auth-dark-bg')
+    } else {
+      document.body.classList.remove('auth-dark-bg')
+    }
+  }, [])
   return (
-    <main className='relative flex min-h-screen flex-col bg-[var(--brand-background-hex)] font-geist-sans text-white'>
-      {/* Background pattern */}
-      <GridPattern
-        x={-5}
-        y={-5}
-        className='absolute inset-0 z-0 stroke-[#ababab]/5'
-        width={90}
-        height={90}
-        aria-hidden='true'
-      />
+    <AuthBackground>
+      <main className='relative flex min-h-screen flex-col font-geist-sans text-foreground'>
+        {/* Header - Nav handles all conditional logic */}
+        <Nav hideAuthButtons={true} variant='auth' />
 
-      {/* Header */}
-      <div className='relative z-10 px-6 pt-9'>
-        <div className='mx-auto max-w-7xl'>
-          <Link href='/' className='inline-flex'>
-            {brand.logoUrl ? (
-              <img
-                src={brand.logoUrl}
-                alt={`${brand.name} Logo`}
-                width={56}
-                height={56}
-                className='h-[56px] w-[56px] object-contain'
-              />
-            ) : (
-              <Image src='/sim.svg' alt={`${brand.name} Logo`} width={56} height={56} />
-            )}
-          </Link>
+        {/* Content */}
+        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
+          <div className='w-full max-w-lg px-4'>{children}</div>
         </div>
-      </div>
-
-      {/* Content */}
-      <div className='relative z-10 flex flex-1 items-center justify-center px-4 pb-6'>
-        <div className='w-full max-w-md'>{children}</div>
-      </div>
-    </main>
+      </main>
+    </AuthBackground>
   )
 }