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 (