From 1ef996f5a354a60e818cc6059f181c1201ce4c7b Mon Sep 17 00:00:00 2001 From: sujay-d07 Date: Mon, 22 Dec 2025 12:28:49 +0530 Subject: [PATCH] feat: Integrate /beta into the Homepage Hero and enhance interactive demo with command input and output display --- client/src/components/InteractiveDemoHero.tsx | 288 ++++++++++++++++++ client/src/hooks/useCortexDemo.ts | 9 +- client/src/index.css | 15 + client/src/sections/HomePage.tsx | 51 +--- 4 files changed, 316 insertions(+), 47 deletions(-) create mode 100644 client/src/components/InteractiveDemoHero.tsx diff --git a/client/src/components/InteractiveDemoHero.tsx b/client/src/components/InteractiveDemoHero.tsx new file mode 100644 index 0000000..0ac3127 --- /dev/null +++ b/client/src/components/InteractiveDemoHero.tsx @@ -0,0 +1,288 @@ +import { useState, useRef, useEffect } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { useCortexDemo } from "@/hooks/useCortexDemo"; +import { Send, Terminal, Loader2, Copy, Check, Download, Sparkles, ChevronRight } from "lucide-react"; + +const EXAMPLE_PROMPTS = [ + "Set up Python for machine learning", + "Install Docker on Ubuntu", + "Configure nginx web server", + "Install PostgreSQL database", + "Set up Node.js development environment", +]; + +export default function InteractiveDemoHero() { + const [input, setInput] = useState(""); + const [copied, setCopied] = useState(false); + const messagesEndRef = useRef(null); + const terminalRef = useRef(null); + + const { + messages, + isLoading, + error, + remaining, + limitReached, + sendMessage, + } = useCortexDemo(); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!input.trim() || isLoading) return; + const message = input; + setInput(""); + await sendMessage(message); + }; + + const handleExampleClick = async (example: string) => { + if (isLoading) return; + setInput(example); + // Auto-submit after a brief moment to show the user what was selected + setTimeout(async () => { + await sendMessage(example); + setInput(""); + }, 300); + }; + + const copyLastCommand = () => { + const lastAssistant = messages.filter((m) => m.role === "assistant").pop(); + if (lastAssistant) { + const codeMatch = lastAssistant.content.match(/```[\s\S]*?```/g); + const textToCopy = codeMatch + ? codeMatch.map((c) => c.replace(/```\w*\n?/g, "").trim()).join("\n") + : lastAssistant.content; + navigator.clipboard.writeText(textToCopy); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + }; + + // Show limit reached state + if (limitReached) { + return ( +
+ +
๐ŸŽ‰
+

Thanks for trying Cortex!

+

+ Ready for the full experience with unlimited access? +

+ + +
+ ); + } + + return ( +
+ + {/* Header */} +
+
+ + Try Before Install โ€” No Signup Required +
+

+ Experience Cortex in 10 Seconds +

+

+ Type what you need in plain English. Watch Cortex generate the exact commands. +

+ {remaining !== null && ( +

+ {remaining} {remaining === 1 ? 'request' : 'requests'} remaining in demo +

+ )} +
+ + {/* Interactive Demo Card */} + + + {/* Input Section */} +
+
+
+
+ + $ + + setInput(e.target.value)} + placeholder="e.g., Install Docker on Ubuntu" + className="pl-8 bg-black/50 border-gray-700 text-white placeholder:text-gray-500 focus:border-purple-500 h-12 text-base" + disabled={isLoading} + /> +
+ +
+ + {/* Example Chips */} +
+ {EXAMPLE_PROMPTS.map((example) => ( + + ))} +
+
+
+ + {/* Terminal Output */} +
+ + + + Output Terminal + + +
+ {messages.length === 0 ? ( +
+ +

Ready to help you install anything

+

Try an example above or type your own request

+
+ ) : ( +
+ {messages.map((message, index) => ( + + {message.role === "user" ? ( +
+ $ cortex + {message.content} +
+ ) : ( +
+ {formatOutput(message.content)} +
+ )} + + ))} + {isLoading && ( +
+ + Processing your request... +
+ )} +
+
+ )} +
+
+ + {/* Error Display */} + {error && ( +
+ {error} +
+ )} + + + + {/* Install CTA */} + + + + +

+ Free forever ยท Open source ยท No credit card required +

+ + +
+ ); +} + +function formatCommandsPreview(content: string): React.ReactNode { + const codeMatch = content.match(/```[\s\S]*?```/g); + if (codeMatch) { + return ( +
+ {codeMatch.map((block, i) => { + const code = block.replace(/```\w*\n?/g, "").trim(); + return ( +
+ {code} +
+ ); + })} +
+ ); + } + return
Processing...
; +} + +function formatOutput(content: string): React.ReactNode { + const parts = content.split(/(```[\s\S]*?```)/g); + return parts.map((part, i) => { + if (part.startsWith("```")) { + const code = part.replace(/```\w*\n?/g, "").trim(); + return ( + + {code} + + ); + } + return {part}; + }); +} diff --git a/client/src/hooks/useCortexDemo.ts b/client/src/hooks/useCortexDemo.ts index de0dd69..9b7c64f 100644 --- a/client/src/hooks/useCortexDemo.ts +++ b/client/src/hooks/useCortexDemo.ts @@ -10,7 +10,14 @@ interface DemoState { limitReached: boolean; } -const SYSTEM_CONTEXT = `You are Cortex, an AI-powered package manager for Debian/Ubuntu Linux. Help users with package installation, dependency resolution, and system configuration. Show exact commands in code blocks. Be concise.`; +const SYSTEM_CONTEXT = `You are Cortex, an AI-powered Linux package manager assistant. When a user asks for installation or configuration help, respond with ONLY the required shell commands in a single code block. Do NOT include: +- Explanatory text or headers (like "Here's how to..." or "## Install X") +- Comments or annotations within or outside the code block +- Additional notes or instructions +- Any text before or after the code block + +Only output the essential commands needed to accomplish the task, formatted in a single bash code block. +`; export function useCortexDemo() { const [state, setState] = useState({ diff --git a/client/src/index.css b/client/src/index.css index 8a1a066..7fb231d 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1396,3 +1396,18 @@ table tbody tr:hover { transition: none !important; } } + +/* Hide scrollbar for mobile chip scrolling */ +.hide-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.hide-scrollbar::-webkit-scrollbar { + display: none; /* Chrome, Safari and Opera */ +} + +/* Smooth scroll behavior for terminal */ +.scroll-smooth { + scroll-behavior: smooth; +} diff --git a/client/src/sections/HomePage.tsx b/client/src/sections/HomePage.tsx index 3775ef4..88c2a75 100644 --- a/client/src/sections/HomePage.tsx +++ b/client/src/sections/HomePage.tsx @@ -56,6 +56,7 @@ import { FaDiscord, FaTwitter } from "react-icons/fa"; import { SiVercel, SiStripe, SiLinear, SiSupabase, SiRailway, SiPlanetscale, SiClerk, SiResend } from "react-icons/si"; import type { Contributor } from "@shared/schema"; import BlogPreview from "@/components/BlogPreview"; +import InteractiveDemoHero from "@/components/InteractiveDemoHero"; interface GitHubStats { openIssues: number; @@ -424,57 +425,15 @@ export default function HomePage({ onNavigate }: HomePageProps) { and Cortex handles the rest โ€” from GPU optimization to deployment. - {/* CTA Buttons */} + {/* Demo */} - - - - View on GitHub - + - {/* Professional Terminal Preview */} - - } - > - - ${" "} - cortex{" "} - install{" "} - tensorflow{" "} - --optimize-gpu - -
- Detected NVIDIA RTX 4090 - Installing CUDA 12.3 drivers - Configuring TensorFlow for GPU - Optimized for your hardware โ€” Ready in 8s -
- -
{/* Social Proof - Logo Wall */}