add favicon. improve copy

app/components/Caveats.tsx

@@ -2,9 +2,9 @@ import { AlertCircle } from 'lucide-react'
 
 export default function Caveats() {
   const caveats = [
-    "LLMs may not always generate correct or expected output",
-    "Commands should always be reviewed before execution",
-    "Results may vary between runs",
+    "AI LLMs may not generate correct, expected, or desired results",
+    "Commands should ALWAYS be reviewed carefully before execution",
+    "Results may vary between runs, even with identical input",
     "Commercial LLM API usage has associated costs",
     "Danger level evaluation is not foolproof",
     "Environment-specific compatibility considerations"

app/components/Examples.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import { Copy } from 'lucide-react'
-
 export default function Examples() {
   const examples = [
     {
@@ -21,29 +19,16 @@ export default function Examples() {
     }
   ]
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text)
-  }
-
   return (
     <section className="space-y-8 bg-white rounded-xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl">
       <h2 className="text-4xl font-bold text-gray-800 border-b pb-4">Examples</h2>
       <div className="space-y-8">
         {examples.map((example, index) => (
           <div key={index} className="space-y-4">
             <h3 className="text-2xl font-semibold text-gray-700">{example.title}</h3>
-            <div className="relative">
-              <pre className="bg-gray-800 p-6 rounded-lg overflow-x-auto text-green-400">
-                <code>{`$ ${example.command}\n$ ${example.output}`}</code>
-              </pre>
-              <button
-                onClick={() => copyToClipboard(`${example.command}\n${example.output}`)}
-                className="absolute top-4 right-4 p-2 bg-gray-700 rounded-md hover:bg-gray-600 transition-colors"
-                aria-label="Copy to clipboard"
-              >
-                <Copy className="w-5 h-5 text-white" />
-              </button>
-            </div>
+            <pre className="bg-gray-800 p-6 rounded-lg overflow-x-auto text-green-400">
+              <code>{`$ ${example.command}\n$ ${example.output}`}</code>
+            </pre>
           </div>
         ))}
       </div>

app/components/Header.tsx

@@ -10,10 +10,10 @@ export default function Header() {
         <div className="absolute inset-0 bg-green-100 rounded-full filter blur-xl opacity-50 animate-pulse"></div>
       </div>
       <h1 className="text-7xl font-extrabold text-gray-900 tracking-tight">abc</h1>
-      <p>
-        <div className="text-2xl text-gray-600 font-light">AI Bash Command</div>
-        <div className="text-xl text-gray-600 font-light">*with support for bash, zsh, tcsh</div>
-      </p>
+      <div className="space-y-1">
+        <span className="block text-2xl text-gray-600 font-light">AI Bash Command</span>
+        <span className="block text-xl text-gray-600 font-light">*with support for bash, zsh, tcsh</span>
+      </div>
       <button
         onClick={() => document.getElementById('installation')?.scrollIntoView({ behavior: 'smooth' })}
         className="bg-green-600 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-green-700 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1"

app/components/Installation.tsx

@@ -33,7 +33,7 @@ abc_setup`
       </div>
       <p className="text-gray-600 text-lg">
         For alternative methods and troubleshooting, see the{' '}
-        <a href="https://github.com/alestic/abc" target="_blank" rel="noopener noreferrer" className="text-green-600 hover:underline">
+        <a href="https://github.com/alestic/abc/blob/main/INSTALL.md" target="_blank" rel="noopener noreferrer" className="text-green-600 hover:underline">
           detailed installation guide
         </a>
         .

app/components/KeyFeatures.tsx

@@ -3,12 +3,13 @@ import { Check } from 'lucide-react'
 export default function KeyFeatures() {
   const features = [
     "Translates natural language into bash/zsh/tcsh commands",
-    "Interactive mode to review and edit before execution",
-    "Configurable through a simple INI config file",
-    "Supports multiple configuration profiles",
+    "Interactive to review and edit before execution",
+    "Seamless integration with existing shell prompt",
+    "abc (natural language) command is added to shell history",
+    "Generated command is added to shell history, if it is run",
+    "Direct communication with LLM API provider through user's API key",
+    "Includes awareness of current shell and operating system",
     "Evaluates and warns about potentially dangerous commands",
-    "Shell-specific command generation (bash, zsh, tcsh)",
-    "Verbose and debug output options"
   ]
 
   return (
@@ -25,4 +26,3 @@ export default function KeyFeatures() {
     </section>
   )
 }
-

app/components/Prerequisites.tsx

@@ -2,10 +2,10 @@ import { CheckCircle } from 'lucide-react'
 
 export default function Prerequisites() {
   const prerequisites = [
-    "Python 3.8 or higher",
     "Linux or macOS",
     "bash 4.4+, zsh 5.0+, or tcsh 6.0+",
-    "An API key for the Claude AI model from Anthropic"
+    "Python 3.8 or higher",
+    "An Anthropic API key for the Claude LLM model",
   ]
 
   return (

app/components/WhatIsAbc.tsx

@@ -8,18 +8,23 @@ export default function WhatIsAbc() {
       </p>
       <p className="text-xl text-gray-600 leading-relaxed">
         abc places the generated command on the next shell prompt, making it easy to review and edit
-        before hitting &lt;Enter&gt;.
+        before running with
+        <kbd className="px-2 py-1.5 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.2)] mx-1"
+        >Enter</kbd>
+        or
+        <kbd className="px-2 py-1.5 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.2)] mx-1"
+        >Return</kbd>
       </p>
       <div className="bg-gray-800 p-6 rounded-lg overflow-x-auto">
         <pre className="text-green-400">
           <code>
 {`$ abc list files one per line, sorting lines from short to long
-# generates:
+
+# may generate something like:
 $ ls -1 | awk '{ print length, $0 }' | sort -n | cut -d" " -f2-`}
           </code>
         </pre>
       </div>
     </section>
   )
 }
-

app/layout.tsx

@@ -5,8 +5,16 @@ import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'abc - AI bash/zsh/tcsh Command',
-  description: 'abc takes English descriptions and converts them into shell commands using the Claude 3.5 Sonnet LLM.',
+  title: 'abc - AI Bash Command (with support for bash, zsh, tcsh)',
+  description: 'abc is a command line tool that converts natural language instructions into shell commands',
+  icons: {
+    icon: [
+      {
+        url: '/favicon.svg',
+        type: 'image/svg+xml',
+      }
+    ]
+  }
 }
 
 export default function RootLayout({
@@ -20,4 +28,3 @@ export default function RootLayout({
     </html>
   )
 }
-

app/page.tsx

@@ -11,7 +11,7 @@ import Footer from './components/Footer'
 
 export const metadata = {
   title: 'abc - AI bash/zsh/tcsh Command',
-  description: 'abc takes English descriptions and converts them into shell commands using the Claude 3.5 Sonnet LLM.',
+  description: 'abc is a command line tool that converts natural language instructions into shell commands and injects them into the next shell command line',
 }
 
 export default function Home() {