create a nice hero section for chatbot demo website and it should be not basic try to and this is my code
import React, { useState, useEffect } from 'react';
import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, TextField, AppBar, Toolbar, Typography, IconButton, Link } from '@mui/material';
import { ChatBot } from "react-gemini-chatbot";
import SettingsIcon from '@mui/icons-material/Settings';
import Footer from './components/Footer';

function App() {
const [open, setOpen] = useState(false);
const [apiKey, setApiKey] = useState('');
const [prompt, setPrompt] = useState('hello i am chatbot');
const [isConfigured, setIsConfigured] = useState(false);

useEffect(() => {
const savedApiKey = localStorage.getItem('geminiApiKey');
const savedPrompt = localStorage.getItem('geminiPrompt');

if (savedApiKey && savedPrompt) {  
  setApiKey(savedApiKey);  
  setPrompt(savedPrompt);  
  setIsConfigured(true);  
} else {  
  setOpen(true);   
}  

}, []);

const handleClose = () => {
if (apiKey && prompt) {
localStorage.setItem('geminiApiKey', apiKey);
localStorage.setItem('geminiPrompt', prompt);
setIsConfigured(true);
setOpen(false);
} else {
alert("Please enter your API key and prompt.");
}
};

const handleOpenConfig = () => {
setOpen(true);
setIsConfigured(false);
};

const handleSubmit = (event) => {
event.preventDefault();
handleClose();
};

return (
<div style={{
backgroundImage: 'linear-gradient(to right bottom, #f0f8ff, #e6f0ff, #dce8ff, #d2e0ff, #c8d9ff)',
minHeight: '100vh',
display: 'flex',
flexDirection: 'column'
}}>
<AppBar position="static" color="secondary" sx={{ marginBottom: 2 }}>
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Gemini Chatbot
</Typography>
<IconButton color="inherit" aria-label="settings" onClick={handleOpenConfig} >
<SettingsIcon />
</IconButton>
</Toolbar>
</AppBar>
<main style={{ flex: 1, padding: '0 20px' }}>
<Dialog open={open} onClose={() => isConfigured ? setOpen(false) : null}>
<DialogTitle>Configure Chatbot</DialogTitle>
<DialogContent>
<DialogContentText>
Please enter your Gemini API details and other settings.
</DialogContentText>
<form onSubmit={handleSubmit} id="chatbot-form">
<TextField
margin="dense"
id="apiKey"
label="Gemini API Key"
type="text"
fullWidth
variant="standard"
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
/>
<TextField
margin="dense"
id="prompt"
label="Default Prompt"
type="text"
fullWidth
variant="standard"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
/>
<DialogContentText> If you don't have an API key, visit this
<Link href="https://www.merge.dev/blog/gemini-api-key" target="_blank" rel="noopener noreferrer">
{" "}https://www.merge.dev/blog/gemini-api-key{" "}
</Link>
to create a Gemini API key.
</DialogContentText>
</form>
</DialogContent>
<DialogActions>
{isConfigured && (
<Button onClick={() => setOpen(false)}>Cancel</Button>
)}
<Button type="submit" form="chatbot-form" onClick={handleSubmit}>
Save Configuration
</Button>
</DialogActions>

</Dialog> <div className='md:pb-6 pb-24'> {isConfigured && <ChatBot apiKey={apiKey} prompt={prompt} />} </div>

</main>  
<Footer/>  
  </div>  

);
}

export default App;
this is my code try to implement the ui for me and code in js only