Build a dark-theme landing interface similar in structure and behavior to ChatGPT’s home screen. Include:

A centered headline that reads: “Hi there. What should we dive into today?”

A large message-input component (“Message Copilot”) centered on the page with rounded corners. The input should include:

A label

A dropdown selector with multiple modes: “Smart (GPT-5)”, “Quick response”, “Think Deeper”, “Study and learn”, and “Search”

An attachments icon on the right

Below the main input, place a row of suggestion buttons such as “Create content”, “Improve writing”, “Write a first draft”, “Draft a text”, etc.

Implement a modal or dropdown menu for the model selector that shows short descriptions beneath each mode.

Use a dark, modern UI design with the following elements:

Deep navy background

Subtle glows and shadows

Smooth transitions

A responsive layout that centers content on large screens and adapts on mobile

Use React + Tailwind CSS. Organize components cleanly (e.g., Header, ModelSelector, MessageInput, Suggestions).

Provide fully working React code, including components, Tailwind classes, and any supporting structures.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Dark Copilot Dive
-emoji: 🏆
-colorFrom: gray
-colorTo: indigo
+title: Dark Copilot Dive 🚀
+colorFrom: blue
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/Header.js

@@ -0,0 +1,11 @@
+class Header extends React.Component {
+    render() {
+        return (
+            <header className="w-full py-6 text-center">
+                <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 text-transparent bg-clip-text">
+                    Hi there. What should we dive into today?
+                </h1>
+            </header>
+        );
+    }
+}

components/MessageInput.js

@@ -0,0 +1,54 @@
+class MessageInput extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            message: ''
+        };
+    }
+
+    handleChange = (e) => {
+        this.setState({ message: e.target.value });
+    };
+
+    handleSubmit = (e) => {
+        e.preventDefault();
+        if (this.state.message.trim()) {
+            this.props.onSend(this.state.message);
+            this.setState({ message: '' });
+        }
+    };
+
+    render() {
+        return (
+            <form onSubmit={this.handleSubmit} className="w-full max-w-2xl mx-auto">
+                <div className="mb-4">
+                    <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
+                        Message Copilot
+                    </label>
+                    <div className="flex">
+                        <input
+                            type="text"
+                            id="message"
+                            value={this.state.message}
+                            onChange={this.handleChange}
+                            placeholder="Type your message here..."
+                            className="flex-1 px-4 py-3 bg-secondary border border-gray-600 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        />
+                        <button
+                            type="button"
+                            className="px-4 py-3 bg-secondary border-t border-r border-b border-gray-600 hover:bg-gray-700 transition-colors"
+                        >
+                            <i data-feather="paperclip" className="w-5 h-5"></i>
+                        </button>
+                        <button
+                            type="submit"
+                            className="px-4 py-3 bg-blue-600 hover:bg-blue-700 rounded-r-lg transition-colors"
+                        >
+                            <i data-feather="send" className="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+            </form>
+        );
+    }
+}

components/ModelSelector.js

@@ -0,0 +1,58 @@
+class ModelSelector extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isOpen: false,
+            selectedMode: 'Smart (GPT-5)'
+        };
+    }
+
+    toggleDropdown = () => {
+        this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+    };
+
+    selectMode = (mode) => {
+        this.setState({
+            selectedMode: mode,
+            isOpen: false
+        });
+        this.props.onModeChange(mode);
+    };
+
+    render() {
+        const modes = [
+            { name: 'Smart (GPT-5)', desc: 'Most capable model for complex tasks' },
+            { name: 'Quick response', desc: 'Fast answers for simple questions' },
+            { name: 'Think Deeper', desc: 'More creative and detailed responses' },
+            { name: 'Study and learn', desc: 'Educational explanations and breakdowns' },
+            { name: 'Search', desc: 'Web-connected information retrieval' }
+        ];
+
+        return (
+            <div className="relative">
+                <button
+                    onClick={this.toggleDropdown}
+                    className="flex items-center justify-between w-full px-4 py-2 bg-secondary border border-gray-600 rounded-lg hover:bg-gray-700 transition-colors"
+                >
+                    <span>{this.state.selectedMode}</span>
+                    <i data-feather="chevron-down" className="w-4 h-4 ml-2"></i>
+                </button>
+
+                {this.state.isOpen && (
+                    <div className="absolute z-10 mt-1 w-full bg-secondary border border-gray-600 rounded-lg shadow-lg overflow-hidden">
+                        {modes.map((mode, index) => (
+                            <div
+                                key={index}
+                                onClick={() => this.selectMode(mode.name)}
+                                className="px-4 py-3 hover:bg-gray-700 cursor-pointer transition-colors"
+                            >
+                                <div className="font-medium">{mode.name}</div>
+                                <div className="text-sm text-gray-400">{mode.desc}</div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+}

components/Suggestions.js

@@ -0,0 +1,28 @@
+class Suggestions extends React.Component {
+    render() {
+        const suggestions = [
+            'Create content',
+            'Improve writing',
+            'Write a first draft',
+            'Draft a text',
+            'Generate ideas',
+            'Analyze document',
+            'Summarize text',
+            'Answer questions'
+        ];
+
+        return (
+            <div className="flex flex-wrap justify-center gap-3 mt-6 max-w-2xl mx-auto">
+                {suggestions.map((suggestion, index) => (
+                    <button
+                        key={index}
+                        onClick={() => this.props.onSuggestionClick(suggestion)}
+                        className="px-4 py-2 bg-secondary hover:bg-gray-700 rounded-full text-sm font-medium transition-colors"
+                    >
+                        {suggestion}
+                    </button>
+                ))}
+            </div>
+        );
+    }
+}

index.html

@@ -1,19 +1,33 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dark Copilot</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <style>
+        .bg-primary {
+            background-color: #0f172a;
+        }
+        .bg-secondary {
+            background-color: #1e293b;
+        }
+    </style>
+</head>
+<body class="bg-primary min-h-screen text-gray-100">
+    <div id="root"></div>
+
+    <script type="text/babel" src="components/Header.js"></script>
+    <script type="text/babel" src="components/ModelSelector.js"></script>
+    <script type="text/babel" src="components/MessageInput.js"></script>
+    <script type="text/babel" src="components/Suggestions.js"></script>
+    <script type="text/babel" src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,37 @@
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentMode: 'Smart (GPT-5)'
+        };
+    }
+
+    handleModeChange = (mode) => {
+        this.setState({ currentMode: mode });
+    };
+
+    handleSendMessage = (message) => {
+        console.log(`Sending message in ${this.state.currentMode} mode:`, message);
+        // Here you would typically call your API
+    };
+
+    handleSuggestionClick = (suggestion) => {
+        console.log(`Selected suggestion:`, suggestion);
+        // Here you would handle the suggestion selection
+    };
+
+    render() {
+        return (
+            <div className="min-h-screen flex flex-col items-center justify-center px-4 pb-20">
+                <Header />
+                <div className="w-full max-w-2xl mb-6">
+                    <ModelSelector onModeChange={this.handleModeChange} />
+                </div>
+                <MessageInput onSend={this.handleSendMessage} />
+                <Suggestions onSuggestionClick={this.handleSuggestionClick} />
+            </div>
+        );
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));