Remix

Make your own version of Boxey AI

Edit the prompt below and generate a customized version in seconds.

Original by Daves Paker

Describe your app

Create a premium Apple-dark style single-page React SaaS application named "Boxey.ai" using Tailwind CSS and Lucide React icons. The entire interface layout must be strictly locked at 100vh, full screen, and completely optimized for mobile touch viewports to prevent layout shifting and input elements from being hidden by the mobile keyboard.

### 1. Visual Architecture & Dynamic Theme (CSS & Tailwind):
- Edge Laser Border: Implement a continuous, flowing multi-color gradient border wrapping the entire viewport using a smooth CSS 'hue-rotate' infinite animation (4s loop) with a high-emissive drop-shadow glow effect.
- Background: Pure cinematic pitch black (#000000).
- Chat Bubbles: User messages (ME) must be inside an intense, solid ultra-white background box with bold pure black text (#000000) and an aggressive soft reflection shadow. AI responses must display clean white text over subtle boundary partitions with generous line spacing.

### 2. Layout Structure & State Management (React Functional Components):
- Top Header: Fixed at top. Left side has a functional hamburger button (☰) triggering a sliding sidebar drawer, and a title "BOXEY.AI". Center has a status badge "🟢 ACCESS UNLIMITED". Right side has a functional clear/new chat button (+) that wipes current chats from state and localStorage.
- Sidebar Drawer: Displays a list of active conversational sessions or past logs stored persistently inside the browser's localStorage. Clicking a session loads it.
- Content Workspace: Flexible flex-1 container that scrolls independently (`overflow-y-auto`). It renders two dynamic views depending on the active tab state:
  1. "home" tab -> The interactive client-side Multi-IA Chat Hub.
  2. "site" tab -> The interactive SaaS Control Studio Split-Screen.
- Floating Apple Dock: Fixed at 20px from the absolute screen bottom, overlapping the content with a high blur glassmorphism effect (`backdrop-blur-md bg-neutral-900/80 border border-white/10`). It holds two tabs to switch the view state: "💬 Chat Hub" and "⚡ Studio SaaS".

### 3. Multi-Model Intelligent Core Logic (Instant Client-Side Simulation):
Implement a clean local handler that intercepts form submission (🥊 or Enter). It must push user input to a chats array state, trigger an active loading state for 0.6 seconds where a spinning mechanical gear icon (⚙️) animate-spin is shown, and then push the specific clone response. 
- Auto-Scroll: Use a React useRef anchor to automatically trigger `scrollIntoView({ behavior: 'smooth' })` down to the absolute latest text row whenever a new message is appended.
- Model Personalities via Dropdown (▲):
  * Boxey: Default active model. Direct, punchy, aggressive boxing coach style. "🥊 BOXEY POIDS LOURD..."
  * ChatGPT 5.5 Ultra: Highly structured, bullet points, massive usage of emojis, clean paragraphs. "🧠 CHATGPT 5.5 ULTRA..."
  * Gemini 3 Pro: High-density, long descriptive paragraphs, fluid multi-modal vocabulary. "✦ GEMINI 3 PRO..."
  * Grok 4.4 Rebel: Piquant tone, rebellious, unfiltered tech humor. "🏴‍☠️ GROK 4.4 REBEL..."
  * Claude 5.2 Sonnet: Deep academic syntax, technical engineering vocabulary, long paragraphs. "🖋️ CLAUDE 5.2..."
  * DeepSeek R2 Matrix: Pseudo-thought process blocks `[Thinking...]` followed by strict, compressed algorithmic segments. "🐳 DEEPSEEK R2..."
- Context Intelligence: If user prompt is short (e.g. "hi", "ok"), return short concise answers matching the persona voice. If the query asks for complex topics, stories, or code, compute a multi-paragraph descriptive response.
- Secret Developer Trigger: If user input is EXACTLY "David225@_x" or "daves225@_x", bypass standard logic to display the full secret profile of the creator: KOUADIO YAO DAVID, 16 years old, born April 29, 2010, Seconde C student, family members (3 brothers: Christian, Jean de Dieu, Fernand / 2 sisters: Rosalie, Edwige / Parents: Papa K. Kouadio & Maman K. Suzanne). Designed to eliminate computational latency in Africa.

### 4. Interactive SaaS Studio ("site" tab view):
- Left Column: Form holding state for `siteTitle` text input, `sitePrompt` textarea, and two HTML color inputs for Primary and Secondary theme accents. A large premium button "PROPULSER LE SITE".
- Right Column: When compiled, renders a clean live interactive preview card matching the selected text and custom colors with a functional "EXPORTER INDEX.HTML 📥" download button utilizing a text data-URI blob.

Ensure 100% executable, bug-free, fully responsive production-ready React code. Do not use placeholders or truncate code blocks.

Free to use. No credit card required.