fix(landing): align preview controls and simplify CLI copy

Author: waleedlatif1

.greptile/config.json

@@ -0,0 +1,3 @@
+{
+  "fileChangeLimit": 600
+}

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame/menu-preview-frame.tsx

@@ -27,7 +27,7 @@ export function MenuPreviewFrame({
       data-menu-preview={kind}
       className={cn(
         'pointer-events-none absolute inset-0 isolate select-none overflow-hidden [container-type:inline-size]',
-        isHero ? 'bg-[var(--bg)]' : 'bg-[var(--surface-3)]'
+        isHero ? 'bg-[var(--bg)]' : 'bg-[var(--surface-3)] [--preview-content-width:576px]'
       )}
     >
       <div

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header.tsx

@@ -12,7 +12,7 @@ interface MenuPreviewToolbarProps {
   children: ReactNode
 }
 
-/** Tables sets the shared title sizing and the visible crop's content width. */
+/** Preview frames can constrain header actions to their visible crop. */
 export function MenuPreviewHeader({
   icon: Icon,
   title,
@@ -27,7 +27,7 @@ export function MenuPreviewHeader({
         size === 'table' ? 'box-content h-10' : 'h-11'
       )}
     >
-      <div className='flex size-full max-w-[576px] items-center gap-2 px-4'>
+      <div className='flex size-full max-w-[var(--preview-content-width,100%)] items-center gap-2 px-4'>
         {Icon && <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
         <div className='flex min-w-0 flex-1 items-center gap-2 whitespace-nowrap text-[var(--text-primary)] text-base'>
           {title}
@@ -46,7 +46,7 @@ export function MenuPreviewHeader({
 export function MenuPreviewToolbar({ children }: MenuPreviewToolbarProps) {
   return (
     <div data-menu-preview-toolbar className='h-[38px] border-[var(--border)] border-b'>
-      <div className='flex size-full max-w-[576px] items-center gap-1 px-2 text-small'>
+      <div className='flex size-full max-w-[var(--preview-content-width,100%)] items-center gap-1 px-2 text-small'>
         {children}
       </div>
     </div>

apps/sim/app/(landing)/components/product-demo/product-demo.tsx

@@ -85,7 +85,7 @@ const EDGE_STRIP =
  * it is deliberately even all the way along an edge, and the player overlays
  * copy on two of them. From `lg` each band runs the copy's 13% inset plus 80px
  * down from the top (the title) or up from the bottom (the link), solid at
- * 10px of blur through the copy (its inset plus 40px) and tapering over the
+ * 8px of blur through the copy (its inset plus 40px) and tapering over the
  * last 40px, and a second mask fades it out sideways, so it covers the centre
  * where the title and the link sit and leaves the corners to the shared strip
  * - a card passing a corner is not blurred for no reason. The bands end where
@@ -94,7 +94,7 @@ const EDGE_STRIP =
  */
 const COPY_BAND =
   'inset-x-0 h-[96px] lg:h-[calc(13%+80px)] [mask-image:linear-gradient(to_right,transparent_15%,black_34%,black_66%,transparent_85%)]'
-const COPY_BLUR = 'absolute inset-0 backdrop-blur-[10px]'
+const COPY_BLUR = 'absolute inset-0 backdrop-blur-[8px]'
 const COPY_TOP_MASK = '[mask-image:linear-gradient(to_bottom,black_calc(100%-40px),transparent)]'
 const COPY_BOTTOM_MASK = '[mask-image:linear-gradient(to_top,black_calc(100%-40px),transparent)]'
 

apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.module.css

@@ -56,39 +56,39 @@
 }
 
 .layer0 {
-  --edge-fade-blur: 0.4px;
+  --edge-fade-blur: 0.3px;
   --edge-fade-from: 0%;
   --edge-fade-in: 20%;
   --edge-fade-out: 40%;
   --edge-fade-to: 60%;
 }
 
 .layer1 {
-  --edge-fade-blur: 1.25px;
+  --edge-fade-blur: 1px;
   --edge-fade-from: 20%;
   --edge-fade-in: 40%;
   --edge-fade-out: 60%;
   --edge-fade-to: 80%;
 }
 
 .layer2 {
-  --edge-fade-blur: 2.5px;
+  --edge-fade-blur: 2px;
   --edge-fade-from: 40%;
   --edge-fade-in: 60%;
   --edge-fade-out: 80%;
   --edge-fade-to: 100%;
 }
 
 .layer3 {
-  --edge-fade-blur: 5px;
+  --edge-fade-blur: 4px;
   --edge-fade-from: 60%;
   --edge-fade-in: 80%;
   --edge-fade-out: 100%;
   --edge-fade-to: 120%;
 }
 
 .layer4 {
-  --edge-fade-blur: 10px;
+  --edge-fade-blur: 8px;
   --edge-fade-from: 80%;
   --edge-fade-in: 100%;
   --edge-fade-out: 120%;

apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx

@@ -30,10 +30,6 @@ export function ProductCodeExample({ example }: ProductCodeExampleProps) {
           <p className='mt-5 max-w-[42ch] text-[var(--text-body)] text-lg leading-relaxed max-sm:text-md'>
             {example.description}
           </p>
-          <p className='mt-4 max-w-[48ch] text-[var(--text-secondary)] text-sm leading-6'>
-            Sign in with <code>sim login</code> and select your workspace. Replace the ID variables
-            with IDs from your workspace.
-          </p>
           <div className='mt-7'>
             <LandingCtaLink href='https://docs.sim.ai/cli' variant='outline' withArrow>
               Explore the CLI