NEXUS_AI.pro/pixel-perfect-pixels-main/src/components/chat/WelcomeScreen.tsx

import { motion } from "framer-motion";
import { Shield, Sparkles, Code, Brain, Zap, Rocket } from "lucide-react";

interface WelcomeScreenProps {
  onSuggestionClick: (suggestion: string) => void;
}

const suggestions = [
  {
    icon: Code,
    title: "Generate an app",
    prompt: "Build me a full-stack todo app with authentication and a database",
    color: "text-[hsl(280,100%,60%)]",
  },
  {
    icon: Brain,
    title: "Research anything",
    prompt: "Explain quantum entanglement and its applications in computing",
    color: "text-[hsl(200,100%,60%)]",
  },
  {
    icon: Zap,
    title: "Debug my code",
    prompt: "Help me debug a piece of code that's throwing a runtime error",
    color: "text-[hsl(170,100%,50%)]",
  },
  {
    icon: Rocket,
    title: "Creative writing",
    prompt: "Write a cyberpunk short story set in a neon-lit megacity in 2084",
    color: "text-[hsl(320,100%,60%)]",
  },
];

export const WelcomeScreen = ({ onSuggestionClick }: WelcomeScreenProps) => {
  return (
    <div className="flex flex-col items-center justify-center flex-1 px-4 py-12 matrix-bg grid-overlay relative">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.6 }}
        className="text-center mb-12 relative z-10"
      >
        <motion.div
          animate={{ boxShadow: [
            "0 0 20px hsl(170 100% 50% / 0.3)",
            "0 0 40px hsl(170 100% 50% / 0.5), 0 0 80px hsl(280 100% 60% / 0.2)",
            "0 0 20px hsl(170 100% 50% / 0.3)",
          ]}}
          transition={{ duration: 3, repeat: Infinity }}
          className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-cyber mb-6"
        >
          <Shield size={40} className="text-primary-foreground" />
        </motion.div>
        <h1 className="text-4xl md:text-5xl font-bold font-heading mb-3 tracking-tight">
          <span className="text-gradient-cyber">NEXUS</span>
          <span className="text-foreground">-AI</span>
        </h1>
        <p className="text-xs font-mono text-muted-foreground tracking-[0.3em] uppercase mb-4">
          Neural Extended Universal System
        </p>
        <p className="text-muted-foreground text-sm max-w-md mx-auto">
          God-tier AI agent. Ask me to code, research, create, analyze, or build anything.
          Press <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border text-[10px] font-mono">⌘K</kbd> for commands.
        </p>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
        className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-2xl relative z-10"
      >
        {suggestions.map((s, index) => (
          <motion.button
            key={s.title}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, delay: 0.3 + index * 0.08 }}
            onClick={() => onSuggestionClick(s.prompt)}
            className="skill-card group flex items-center gap-3 p-4 rounded-lg bg-card border border-border hover:border-neon-cyan text-left"
          >
            <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-muted flex items-center justify-center group-hover:bg-primary/10 transition-colors">
              <s.icon size={20} className={`${s.color} group-hover:text-primary transition-colors`} />
            </div>
            <div>
              <p className="font-medium text-sm text-foreground group-hover:text-primary transition-colors">
                {s.title}
              </p>
              <p className="text-xs text-muted-foreground line-clamp-1">
                {s.prompt}
              </p>
            </div>
          </motion.button>
        ))}
      </motion.div>
    </div>
  );
};