RC-7-home-page (#5)

https://ru.yougile.com/team/a605078664af/#chat:2ae00178ba0d
Reviewed-on: #5

src/app/main/home/components/Welcome.js

@@ -0,0 +1,41 @@
+import { memo, useState } from 'react';
+import { withTranslation } from 'react-i18next';
+import SearchInput from '../../shared-components/SearchInput';
+
+function Welcome({ t }) {
+  const [query, setQuery] = useState('');
+
+  const onInputType = (event) => {
+    const { target } = event;
+    const value = target?.value ?? '';
+    console.log(value);
+    setQuery(value);
+  };
+
+  const onSearch = () => {
+    // query
+  };
+
+  return (
+    <section className="h-[calc(100vh-72px)] mb-[105px] bg-home-welcome bg-cover">
+      <div className="flex flex-col max-w-8xl w-full mx-auto pt-160 px-10">
+        <h1 className="max-w-[910px] mb-[30px] text-7xl font-bold text-primary-light">
+          {t('title')}
+        </h1>
+        <p className="max-w-[820px] mb-[100px] text-2xl font-medium text-primary-light">
+          {t('subtitle')}
+        </p>
+        <SearchInput
+          mode="simple"
+          placeholder={t('main_input_placeholder')}
+          btnText={t('main_input_btn')}
+          query={query}
+          onType={onInputType}
+          onSearch={onSearch}
+        />
+      </div>
+    </section>
+  );
+}
+
+export default withTranslation('homePage')(memo(Welcome));