diff --git a/internal/site/app/(public)/home/page.tsx b/internal/site/app/(public)/home/page.tsx index b038fa63..ecd09dd7 100644 --- a/internal/site/app/(public)/home/page.tsx +++ b/internal/site/app/(public)/home/page.tsx @@ -1,19 +1,23 @@ "use client"; import { + Bot, Check, CheckSquare, ChevronDown, Cloud, + Code, Container, Copy, ExternalLink, + Eye, GitBranch, Key, - Moon, + MessageSquare, Play, RotateCw, - Sun, + Terminal, + Users, X, Zap, } from "lucide-react"; @@ -45,13 +49,14 @@ export default function Home() { const [thirdTerminalPrompt, setThirdTerminalPrompt] = useState("laptop slackbot % "); const thirdTerminalAnimationStarted = useRef(false); - const [isDarkMode, setIsDarkMode] = useState(false); const [isVideoModalOpen, setIsVideoModalOpen] = useState(false); const [isMounted, setIsMounted] = useState(false); const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false); const [copiedPMIndex, setCopiedPMIndex] = useState(null); const sectionRefs = useRef<(HTMLDivElement | null)[]>([]); const intervalIdsRef = useRef([]); + const [slideOutIcon, setSlideOutIcon] = useState(false); + const [animateInIcon, setAnimateInIcon] = useState(false); // Package manager configurations const packageManagers = [ @@ -86,26 +91,21 @@ export default function Home() { setIsMounted(true); }, []); - // Load dark mode preference from localStorage on mount, or default to dark mode + // Animate icon in from top on mount useEffect(() => { - if (typeof window !== "undefined") { - const savedMode = localStorage.getItem("blinkDarkMode"); - if (savedMode !== null) { - // User has a saved preference - setIsDarkMode(savedMode === "true"); - } else { - // No saved preference, default to dark mode - setIsDarkMode(true); - } - } + const timer = setTimeout(() => { + setAnimateInIcon(true); + }, 100); // Small delay to ensure initial state is rendered + return () => clearTimeout(timer); }, []); - // Save dark mode preference to localStorage whenever it changes + // Slide out icon after 4 seconds over headline (4400ms total: 100ms delay + 500ms slide-in + 3800ms stay) useEffect(() => { - if (typeof window !== "undefined") { - localStorage.setItem("blinkDarkMode", isDarkMode.toString()); - } - }, [isDarkMode]); + const timer = setTimeout(() => { + setSlideOutIcon(true); + }, 4400); + return () => clearTimeout(timer); + }, []); // Handle escape key to close video modal and lock body scroll useEffect(() => { @@ -628,7 +628,7 @@ export default function Home() { priceCurrency: "USD", }, description: - "Build and deploy Slack agents from your terminal. Open source, local-first agent framework.", + "Self-hosted platform for deploying custom AI agents. Ships with Scout, a powerful coding agent for deep code research. Integrates with Slack, GitHub, and your infrastructure.", url: "https://blink.coder.com", downloadUrl: "https://blink.coder.com", softwareVersion: "1.0", @@ -670,36 +670,72 @@ export default function Home() { className="absolute inset-0 pointer-events-none" style={{ background: - "radial-gradient(ellipse 1200px 800px at 50% 100%, rgb(58 34 14 / 80%) 0%, rgba(9, 11, 11, 0) 65%)", + "radial-gradient(ellipse 1200px 800px at 50% 100%, rgba(14, 28, 58, 0.8) 0%, rgba(9, 11, 11, 0) 65%)", }} /> -
+
- {/* Early Access Pill */} -
- + {/* Blink hop icon */} +
+ + Blink
- -

- Vibe your perfect agent. -
- Then chat with it in Slack. +

+ Your team's deep code research partner, in Slack

- Chat with Blink to turn your ideas into fully functional Slack - chatbots, tooled, deployed, and ready to /invite to your channels - — built on open source. + Blink is a self-hosted platform for deploying custom agents, and + ships with a powerful coding agent that includes GitHub and Slack + tools out of the box.

- {/* Click to Copy Command */} + {/* View Docs CTA */}
= 1 @@ -707,88 +743,26 @@ export default function Home() { : "opacity-0 translate-y-4" }`} > -
- {/* Main Copy Button with Expandable Menu */} -
- - - {/* Expandable Command Menu */} - {isCommandMenuOpen && ( - <> - {/* Backdrop */} -
setIsCommandMenuOpen(false)} - /> - {/* Command List */} -
- {packageManagers.map((pm, index) => ( - - ))} -
- - )} -
+ - {/* Documentation Link */} - - View Documentation - - {/* Animated line extending down - layered behind button */} {lineAnimated && (
@@ -812,9 +786,7 @@ export default function Home() { {/* Section 1: Two-column layout with animated line */}
{/* Shimmer divider line at top of section */}
@@ -827,891 +799,83 @@ export default function Home() { }} />
-
- {/* Dark/Light Mode Toggle */} - - +
{/* Vertical line continuing from above */} {lineAnimated && (
)} {/* Section Headline */}
-

- You ask. Blink builds. +

+ Built for real work, not just chat

-

- Blink creates, configures, and deploys your agents. All from your - terminal. +

+ Blink agents deliver a Slack experience that other agents can only + hallucinate about.

-
- {/* Row 1: Create your agent */} -
{ - sectionRefs.current[0] = el; - }} - data-section="0" - className={`grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-8 lg:gap-16 items-center transition-all duration-700 ease-out ${visibleSections.has(0) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`} - > - {/* Code Block */} -
-
-
-
-
-
-
-
- - Terminal — /agents/slackbot - - -
-
-
- {terminalPrompt.includes(" blink init") ? ( - <> - laptop slackbot %{" "} - blink init - - ) : ( - terminalPrompt - )} -
- {terminalLines.map((line, index) => ( -
- {line.includes("blink dev") ? ( - <> - {" "} - blink dev - - ) : ( - line || "\u00A0" - )} -
- ))} -
-
-
- - {/* Circle in the middle */} -
-
-
- - {/* Text Block */} -
-
-
-

- blink init -

- -
-

- Blink sets up everything your agent needs to deploy, from - project structure to configuration. In a few guided steps, - you'll create your agent's Slack app and manifest, ready to - build and launch. -

- - View docs - - -
-
+
+
+