Simplify installation steps and replace CLI mockup with screenshot

README.md

@@ -24,7 +24,7 @@ ember-mug
 ### Run with npx (No Installation)
 
 ```bash
-npx ember-mug
+npx ember-mug@latest
 ```
 
 ### Local Development

apps/web/src/components/Installation.tsx

@@ -5,20 +5,14 @@ import './Installation.css'
 const installSteps = [
   {
     step: '01',
-    title: 'Install the CLI',
-    command: 'npm install -g ember-mug',
-    description: 'Install ember-mug globally via npm to make it available from anywhere.',
-  },
-  {
-    step: '02',
     title: 'Enable Bluetooth',
     command: null,
     description: 'Make sure Bluetooth is enabled on your device and your Ember mug is powered on.',
   },
   {
-    step: '03',
+    step: '02',
     title: 'Run the CLI',
-    command: 'ember-mug',
+    command: 'npx ember-mug@latest',
     description: 'Launch the CLI and it will automatically discover and connect to your mug.',
   },
 ]
@@ -37,7 +31,7 @@ export default function Installation() {
           transition={{ duration: 0.6 }}
         >
           <h2>Get Started in Seconds</h2>
-          <p>Three simple steps to start controlling your Ember mug from the terminal.</p>
+          <p>Two simple steps to start controlling your Ember mug from the terminal.</p>
         </motion.div>
 
         <div className="steps-container">

apps/web/src/components/Terminal.css

@@ -87,288 +87,18 @@
 }
 
 .terminal-body {
-  padding: 1.5rem;
-  overflow-x: auto;
-}
-
-/* CLI Interface Styles */
-.cli-interface {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-}
-
-.cli-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 0;
-}
-
-.cli-logo {
-  color: var(--accent);
-  font-weight: bold;
-}
-
-.cli-title {
-  color: var(--text-secondary);
-  font-weight: 600;
-}
-
-.cli-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--text-secondary);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--accent);
-  border-radius: 50%;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-.cli-divider {
-  height: 1px;
-  background: var(--accent);
-  margin: 0.75rem 0;
-  opacity: 0.5;
-}
-
-.cli-main {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 2rem;
-  padding: 1rem 0;
-}
-
-.cli-mug {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ascii-art {
-  color: var(--accent);
-  font-size: 0.7rem;
-  line-height: 1.2;
-  opacity: 0.9;
-}
-
-.cli-panels {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.cli-panel {
-  border: 1px dashed var(--accent);
-  border-radius: 4px;
-  padding: 0.75rem;
-  background: rgba(224, 122, 95, 0.02);
-}
-
-.panel-header {
-  color: var(--accent);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px dashed var(--border);
-}
-
-.panel-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Temperature Panel */
-.temp-content {
-  align-items: center;
-}
-
-.temp-display {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.temp-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.temp-label {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-}
-
-.temp-value {
-  color: var(--accent);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.temp-value.target {
-  color: var(--text-primary);
-}
-
-.temp-arrow {
-  color: var(--text-muted);
-}
-
-.temp-status {
-  color: var(--accent);
-  font-size: 0.8rem;
-}
-
-/* Battery Panel */
-.battery-content {
-  align-items: center;
-}
-
-.battery-percent {
-  color: var(--accent);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.battery-bar {
-  width: 100%;
-  max-width: 150px;
-  height: 16px;
-  background: var(--bg-secondary);
-  border-radius: 2px;
+  padding: 0;
   overflow: hidden;
 }
 
-.battery-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: 2px;
-}
-
-.battery-time {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-/* Adjust Panel */
-.adjust-content {
-  align-items: center;
-}
-
-.slider-display {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+.terminal-screenshot {
   width: 100%;
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-.slider-track {
-  flex: 1;
-  height: 4px;
-  background: var(--bg-secondary);
-  border-radius: 2px;
-  position: relative;
-}
-
-.slider-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: 2px;
-}
-
-.slider-thumb {
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 12px;
-  height: 12px;
-  background: var(--text-primary);
-  border-radius: 50%;
-  border: 2px solid var(--accent);
-}
-
-.slider-hint {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-}
-
-/* Presets Panel */
-.presets-content {
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.preset {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  border: 1px dashed var(--border);
-  border-radius: 4px;
-  min-width: 60px;
-}
-
-.preset-name {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.preset-temp {
-  font-size: 0.8rem;
-  color: var(--text-primary);
-}
-
-.preset-key {
-  font-size: 0.7rem;
-  color: var(--accent);
-}
-
-.cli-footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  justify-content: center;
-  padding: 0.5rem 0;
-  font-size: 0.8rem;
-  color: var(--text-muted);
-}
-
-.cli-footer b {
-  color: var(--accent);
-  font-weight: 500;
+  height: auto;
+  display: block;
 }
 
 @media (max-width: 768px) {
   .terminal-section {
     padding: 4rem 1rem;
   }
-
-  .cli-main {
-    grid-template-columns: 1fr;
-  }
-
-  .cli-mug {
-    display: none;
-  }
-
-  .cli-panels {
-    grid-template-columns: 1fr;
-  }
-
-  .presets-content {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
 }