From 38c892230aa31c4ca997e48a17c628d0fbeb37b2 Mon Sep 17 00:00:00 2001 From: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com> Date: Sun, 15 Mar 2026 04:55:28 -0700 Subject: [PATCH] improvement: landing, sidebar, globals, buttons (#3590) * improvement: landing, sidebar, globals, buttons * improvement(landing): features * improvement: features, footer, tab modals * migrations * temp: enterprise link * addressed comments --- .../collaboration/collaboration.tsx | 6 +- .../features/components/features-preview.tsx | 113 + .../(home)/components/features/features.tsx | 255 +- .../app/(home)/components/footer/footer.tsx | 203 +- apps/sim/app/(home)/components/hero/hero.tsx | 28 +- .../landing-preview-home.tsx | 98 + .../landing-preview-panel.tsx | 28 +- .../landing-preview-sidebar.tsx | 269 +- .../preview-block-node.tsx | 2 + .../landing-preview-workflow/workflow-data.ts | 29 +- .../landing-preview/landing-preview.tsx | 48 +- .../app/(home)/components/navbar/navbar.tsx | 4 +- .../app/(home)/components/pricing/pricing.tsx | 4 +- .../(home)/components/templates/templates.tsx | 6 +- apps/sim/app/_styles/globals.css | 29 +- apps/sim/app/api/emails/preview/route.ts | 2 +- .../components/thank-you-screen.tsx | 2 +- .../[executionId]/resume-page-client.tsx | 2 +- apps/sim/app/templates/[id]/template.tsx | 4 +- .../app/workspace/[workspaceId]/home/home.tsx | 4 +- .../document-tags-modal.tsx | 4 +- .../add-connector-modal.tsx | 2 +- .../add-documents-modal.tsx | 2 +- .../base-tags-modal/base-tags-modal.tsx | 2 +- .../edit-connector-modal.tsx | 2 +- .../rename-document-modal.tsx | 2 +- .../create-base-modal/create-base-modal.tsx | 2 +- .../edit-knowledge-base-modal.tsx | 2 +- .../notifications/notifications.tsx | 6 +- .../create-schedule-modal/schedule-modal.tsx | 2 +- .../settings/components/api-keys/api-keys.tsx | 2 +- .../create-api-key-modal.tsx | 2 +- .../settings/components/byok/byok.tsx | 8 +- .../settings/components/copilot/copilot.tsx | 4 +- .../credential-sets/credential-sets.tsx | 6 +- .../credentials/credentials-manager.tsx | 4 +- .../components/custom-tools/custom-tools.tsx | 2 +- .../settings/components/debug/debug.tsx | 2 +- .../settings/components/general/general.tsx | 2 +- .../components/inbox/inbox-enable-toggle.tsx | 2 +- .../components/inbox/inbox-settings-tab.tsx | 2 +- .../settings/components/inbox/inbox.tsx | 2 +- .../integrations/integrations-manager.tsx | 6 +- .../mcp-server-form-modal.tsx | 4 +- .../settings/components/mcp/mcp.tsx | 6 +- .../recently-deleted/recently-deleted.tsx | 4 +- .../skills/components/skill-modal.tsx | 2 +- .../settings/components/skills/skills.tsx | 2 +- .../credit-balance/credit-balance.tsx | 2 +- .../components/subscription/subscription.tsx | 8 +- .../member-invitation-card.tsx | 2 +- .../no-organization-view.tsx | 6 +- .../team-seats-overview.tsx | 2 +- .../components/team-seats/team-seats.tsx | 2 +- .../template-profile/template-profile.tsx | 2 +- .../workflow-mcp-servers.tsx | 16 +- .../components/row-modal/row-modal.tsx | 2 +- .../checkpoint-confirmation.tsx | 2 +- .../components/tool-call/tool-call.tsx | 6 +- .../components/deploy-modal/deploy-modal.tsx | 22 +- .../components/oauth-required-modal.tsx | 2 +- .../custom-tool-modal/custom-tool-modal.tsx | 8 +- .../tool-input/components/tools/parameter.tsx | 2 +- .../editor/components/sub-block/sub-block.tsx | 2 +- .../training-modal/training-modal.tsx | 8 +- .../components/help-modal/help-modal.tsx | 2 +- .../components/context-menu/context-menu.tsx | 2 +- .../create-workspace-modal.tsx | 2 +- .../components/invite-modal/invite-modal.tsx | 4 +- .../workspace-header/workspace-header.tsx | 9 +- apps/sim/app/workspace/layout.tsx | 6 +- apps/sim/components/emails/_styles/base.ts | 2 +- .../components/button-group/button-group.tsx | 2 +- .../emcn/components/button/button.tsx | 5 +- .../emcn/components/modal/modal.tsx | 6 +- .../v0-5/components/diff-controls-demo.tsx | 2 +- .../components/access-control.tsx | 20 +- apps/sim/ee/sso/components/sso-settings.tsx | 4 +- packages/db/migrations/0176_clear_luckman.sql | 1 + .../db/migrations/meta/0176_snapshot.json | 13541 ++++++++++++++++ packages/db/migrations/meta/_journal.json | 7 + packages/db/schema.ts | 2 +- 82 files changed, 14542 insertions(+), 393 deletions(-) create mode 100644 apps/sim/app/(home)/components/features/components/features-preview.tsx create mode 100644 apps/sim/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx create mode 100644 packages/db/migrations/0176_clear_luckman.sql create mode 100644 packages/db/migrations/meta/0176_snapshot.json diff --git a/apps/sim/app/(home)/components/collaboration/collaboration.tsx b/apps/sim/app/(home)/components/collaboration/collaboration.tsx index f913dc76ae..9f6b2102f7 100644 --- a/apps/sim/app/(home)/components/collaboration/collaboration.tsx +++ b/apps/sim/app/(home)/components/collaboration/collaboration.tsx @@ -25,7 +25,7 @@ function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) { }} > {Array.from({ length: cols * rows }, (_, i) => ( -
+
))}
) @@ -268,13 +268,13 @@ export default function Collaboration() { collaboration -

+

Grab your team. Build agents together
in real-time inside your workspace.

Build together diff --git a/apps/sim/app/(home)/components/features/components/features-preview.tsx b/apps/sim/app/(home)/components/features/components/features-preview.tsx new file mode 100644 index 0000000000..f38e770d0d --- /dev/null +++ b/apps/sim/app/(home)/components/features/components/features-preview.tsx @@ -0,0 +1,113 @@ +'use client' + +import { type SVGProps, useRef } from 'react' +import { motion, useInView } from 'framer-motion' +import { ChevronDown } from '@/components/emcn' +import { Database, File, Library, Table } from '@/components/emcn/icons' +import { + AnthropicIcon, + GeminiIcon, + GmailIcon, + GroqIcon, + HubspotIcon, + OpenAIIcon, + SalesforceIcon, + SlackIcon, + xAIIcon, +} from '@/components/icons' + +interface IconEntry { + key: string + icon: React.ComponentType> + label: string + top: string + left: string + color?: string +} + +const SCATTERED_ICONS: IconEntry[] = [ + { key: 'slack', icon: SlackIcon, label: 'Slack', top: '8%', left: '14%' }, + { key: 'openai', icon: OpenAIIcon, label: 'OpenAI', top: '8%', left: '44%' }, + { key: 'anthropic', icon: AnthropicIcon, label: 'Anthropic', top: '10%', left: '78%' }, + { key: 'gmail', icon: GmailIcon, label: 'Gmail', top: '24%', left: '90%' }, + { key: 'salesforce', icon: SalesforceIcon, label: 'Salesforce', top: '28%', left: '6%' }, + { key: 'table', icon: Table, label: 'Tables', top: '22%', left: '30%' }, + { key: 'xai', icon: xAIIcon, label: 'xAI', top: '26%', left: '66%' }, + { key: 'hubspot', icon: HubspotIcon, label: 'HubSpot', top: '55%', left: '4%', color: '#FF7A59' }, + { key: 'database', icon: Database, label: 'Database', top: '74%', left: '68%' }, + { key: 'file', icon: File, label: 'Files', top: '70%', left: '18%' }, + { key: 'gemini', icon: GeminiIcon, label: 'Gemini', top: '58%', left: '86%' }, + { key: 'logs', icon: Library, label: 'Logs', top: '86%', left: '44%' }, + { key: 'groq', icon: GroqIcon, label: 'Groq', top: '90%', left: '82%' }, +] + +const EXPLODE_STAGGER = 0.04 +const EXPLODE_BASE_DELAY = 0.1 + +export function FeaturesPreview() { + const containerRef = useRef(null) + const inView = useInView(containerRef, { once: true, margin: '-80px' }) + + return ( +
+ + ) +} diff --git a/apps/sim/app/(home)/components/features/features.tsx b/apps/sim/app/(home)/components/features/features.tsx index 7a7386703b..927e98c807 100644 --- a/apps/sim/app/(home)/components/features/features.tsx +++ b/apps/sim/app/(home)/components/features/features.tsx @@ -1,8 +1,11 @@ 'use client' -import { useState } from 'react' +import { useRef, useState } from 'react' +import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion' import Image from 'next/image' -import { Badge } from '@/components/emcn' +import Link from 'next/link' +import { Badge, ChevronDown } from '@/components/emcn' +import { FeaturesPreview } from '@/app/(home)/components/features/components/features-preview' function hexToRgba(hex: string, alpha: number): string { const r = Number.parseInt(hex.slice(1, 3), 16) @@ -13,8 +16,12 @@ function hexToRgba(hex: string, alpha: number): string { const FEATURE_TABS = [ { - label: 'Integrations', + label: 'Mothership', color: '#FA4EDF', + title: 'Your AI command center', + description: + 'Direct your entire AI workforce from one place. Build agents, spin up workflows, query tables, and manage every resource across your workspace — in natural language.', + cta: 'Explore mothership', segments: [ [0.3, 8], [0.25, 10], @@ -29,8 +36,12 @@ const FEATURE_TABS = [ ], }, { - label: 'Copilot', + label: 'Tables', color: '#2ABBF8', + title: 'A database, built in', + description: + 'Filter, sort, and edit data inline, then wire it directly into your workflows. Agents query, insert, and update rows on every run — no external database needed.', + cta: 'Explore tables', segments: [ [0.25, 12], [0.4, 10], @@ -44,59 +55,33 @@ const FEATURE_TABS = [ ], }, { - label: 'Models', - color: '#00F701', - badgeColor: '#22C55E', - segments: [ - [0.2, 6], - [0.35, 10], - [0.3, 8], - [0.5, 10], - [0.6, 8], - [0.75, 12], - [0.85, 10], - [1, 8], - [0.9, 12], - [1, 10], - [0.95, 6], - ], - }, - { - label: 'Deploy', + label: 'Files', color: '#FFCC02', badgeColor: '#EAB308', - segments: [ - [0.3, 12], - [0.25, 8], - [0.4, 10], - [0.55, 10], - [0.7, 8], - [0.6, 10], - [0.85, 12], - [1, 10], - [0.9, 10], - [1, 10], - ], - }, - { - label: 'Logs', - color: '#FF6B35', + title: 'Upload, create, and share', + description: + 'Create or upload documents, spreadsheets, and media that agents can read, write, and reference across workflows. One shared store your entire team and every agent can pull from.', + cta: 'Explore files', segments: [ [0.25, 10], - [0.35, 8], - [0.3, 10], + [0.4, 8], + [0.35, 12], [0.5, 10], [0.65, 8], - [0.8, 12], - [0.9, 10], + [0.75, 10], + [0.9, 12], [1, 10], - [0.85, 12], + [0.85, 10], [1, 10], ], }, { label: 'Knowledge Base', color: '#8B5CF6', + title: 'Your context engine', + description: + 'Sync institutional knowledge from 30+ live connectors — Notion, Drive, Slack, Confluence, and more — so every agent draws from the same truth across your entire organization.', + cta: 'Explore knowledge base', segments: [ [0.3, 10], [0.25, 8], @@ -110,8 +95,47 @@ const FEATURE_TABS = [ [1, 10], ], }, + { + label: 'Logs', + color: '#FF6B35', + title: 'Full visibility, every run', + description: + 'Trace every execution block by block — inputs, outputs, cost, and duration. Filter by status or workflow, replay snapshots, and export reports to keep your team accountable.', + cta: 'Explore logs', + segments: [ + [0.25, 10], + [0.35, 8], + [0.3, 10], + [0.5, 10], + [0.65, 8], + [0.8, 12], + [0.9, 10], + [1, 10], + [0.85, 12], + [1, 10], + ], + }, ] +const HEADING_TEXT = 'Everything you need to build, deploy, and manage AI agents. ' +const HEADING_LETTERS = HEADING_TEXT.split('') + +const LETTER_REVEAL_SPAN = 0.85 +const LETTER_FADE_IN = 0.04 + +interface ScrollLetterProps { + scrollYProgress: MotionValue + charIndex: number + children: string +} + +function ScrollLetter({ scrollYProgress, charIndex, children }: ScrollLetterProps) { + const threshold = (charIndex / HEADING_LETTERS.length) * LETTER_REVEAL_SPAN + const opacity = useTransform(scrollYProgress, [threshold, threshold + LETTER_FADE_IN], [0.4, 1]) + + return {children} +} + function DotGrid({ cols, rows, @@ -126,7 +150,7 @@ function DotGrid({ return (