44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import ChatInput from './ChatInput';
|
|||
|
|
import { CurrentView } from '../types';
|
|||
|
|
import { ArrowDownTrayIcon } from './icons';
|
|||
|
|
import { SECTION_IDS } from '../constants';
|
|||
|
|
|
|||
|
|
interface HeroSectionProps {
|
|||
|
|
setCurrentView: (view: CurrentView) => void;
|
|||
|
|
isChatHidden?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const HeroSection: React.FC<HeroSectionProps> = ({ setCurrentView, isChatHidden = false }) => {
|
|||
|
|
return (
|
|||
|
|
<section
|
|||
|
|
id="hero"
|
|||
|
|
className="relative min-h-screen flex items-center justify-center overflow-hidden bg-white p-4"
|
|||
|
|
>
|
|||
|
|
<div className="w-full max-w-3xl text-center">
|
|||
|
|
<h1 className="mb-6 mx-auto text-4xl sm:text-5xl font-semibold leading-tight tracking-tight text-slate-900 font-quicksand">
|
|||
|
|
Чем мы можем помочь?
|
|||
|
|
</h1>
|
|||
|
|
<div className={`transition-opacity duration-300 ${isChatHidden ? 'opacity-0' : 'opacity-100'}`}>
|
|||
|
|
<ChatInput setCurrentView={setCurrentView} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a
|
|||
|
|
href={`#${SECTION_IDS.story}`}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
document.getElementById(SECTION_IDS.story)?.scrollIntoView({ behavior: 'smooth' });
|
|||
|
|
}}
|
|||
|
|
className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10"
|
|||
|
|
aria-label="Прокрутить вниз"
|
|||
|
|
>
|
|||
|
|
<ArrowDownTrayIcon className="h-8 w-8 text-slate-500 animate-bounce hover:text-slate-700 transition-colors" />
|
|||
|
|
</a>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default HeroSection;
|