website poc

apps/website/components/mockups/CompanionAutomationMockup.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+
+export default function CompanionAutomationMockup() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
+    visible: { opacity: 1, y: 0 }
+  };
+
+  return (
+    <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden">
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="space-y-6"
+      >
+        {/* Companion App Header */}
+        <motion.div variants={itemVariants}>
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-10 w-10 bg-primary-blue/20 rounded-lg border border-primary-blue/40 flex items-center justify-center">
+              <div className="h-5 w-5 bg-primary-blue/60 rounded"></div>
+            </div>
+            <div>
+              <div className="text-sm font-semibold text-white">GridPilot Companion</div>
+              <div className="text-xs text-white/50">Session Creator</div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Configuration Card */}
+        <motion.div 
+          variants={itemVariants}
+          className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline"
+        >
+          <div className="flex items-center justify-between mb-3">
+            <div className="text-xs text-white/60">Session Template</div>
+            <div className="h-5 w-20 bg-performance-green/30 rounded-full flex items-center justify-center">
+              <div className="text-xs text-performance-green">Ready</div>
+            </div>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
+              <div className="h-2 w-32 bg-white/10 rounded"></div>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
+              <div className="h-2 w-28 bg-white/10 rounded"></div>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
+              <div className="h-2 w-36 bg-white/10 rounded"></div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Browser Automation Visual */}
+        <motion.div 
+          variants={itemVariants}
+          className="relative bg-charcoal-outline rounded-lg p-4 border border-primary-blue/30 overflow-hidden"
+        >
+          {/* Browser Window Mockup */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-2 pb-3 border-b border-white/10">
+              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
+              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
+              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
+              <div className="flex-1 h-2 bg-white/5 rounded ml-2"></div>
+            </div>
+            
+            {/* Automation Steps */}
+            <div className="space-y-2">
+              {[1, 2, 3, 4].map((step, index) => (
+                <motion.div
+                  key={step}
+                  className="flex items-center gap-2"
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ 
+                    opacity: 1, 
+                    x: 0,
+                    transition: { delay: shouldReduceMotion ? 0 : 0.5 + (index * 0.15) }
+                  }}
+                >
+                  <motion.div
+                    className="h-3 w-3 bg-performance-green/40 rounded-full flex items-center justify-center"
+                    animate={shouldReduceMotion ? {} : {
+                      scale: index === 3 ? [1, 1.2, 1] : 1,
+                      opacity: index === 3 ? [0.4, 1, 0.4] : 1
+                    }}
+                    transition={{ duration: 1.5, repeat: Infinity }}
+                  >
+                    <div className="h-1.5 w-1.5 bg-performance-green rounded-full"></div>
+                  </motion.div>
+                  <div className="h-2 w-full bg-white/5 rounded"></div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+
+          {/* Automation Running Indicator */}
+          <motion.div
+            className="absolute top-2 right-2 flex items-center gap-2 bg-deep-graphite/80 backdrop-blur-sm px-3 py-1.5 rounded-full border border-primary-blue/30"
+            animate={shouldReduceMotion ? {} : {
+              boxShadow: [
+                '0 0 8px rgba(25,140,255,0.2)',
+                '0 0 16px rgba(25,140,255,0.4)',
+                '0 0 8px rgba(25,140,255,0.2)'
+              ]
+            }}
+            transition={{ duration: 2, repeat: Infinity }}
+          >
+            <motion.div
+              className="h-2 w-2 bg-primary-blue rounded-full"
+              animate={shouldReduceMotion ? {} : {
+                opacity: [1, 0.5, 1]
+              }}
+              transition={{ duration: 1.5, repeat: Infinity }}
+            />
+            <div className="text-xs text-primary-blue">Running</div>
+          </motion.div>
+        </motion.div>
+
+        {/* One-Click Action */}
+        <motion.div 
+          variants={itemVariants}
+          className="flex items-center justify-center"
+        >
+          <motion.div
+            className="bg-primary-blue/20 text-primary-blue px-6 py-2.5 rounded-lg border border-primary-blue/40 text-sm font-semibold"
+            whileHover={shouldReduceMotion ? {} : {
+              scale: 1.03,
+              boxShadow: '0 4px 24px rgba(25,140,255,0.3)',
+              transition: { duration: 0.15 }
+            }}
+          >
+            Create Session
+          </motion.div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}