src/core/styles/variables.scss

@@ -18,6 +18,7 @@ $color-white: #FFFFFF;
 $color-black: #000000;
 $color-orange: #E96526;
 $color-lightgray: #E4E1E1;
+$color-darkgray: #999999;
 $color-text: #333333;
 $color-text-light: #222222;
 $color-mark: #E96526;

src/shared/ui/index.ts

@@ -1,2 +1,3 @@
 export { Button } from './button';
 export { Mark } from './mark';
+export { Input } from './input';

src/shared/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './input';

src/shared/ui/input/input.module.scss

@@ -0,0 +1,14 @@
+.Container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px 40px;
+  width: max-content;
+  border: 1px solid $color-darkgray;
+  border-radius: 28px;
+  background: $color-white;
+}
+
+.Input {
+
+}

src/shared/ui/input/input.tsx

@@ -0,0 +1,22 @@
+import s from './input.module.scss';
+import { clsx } from 'clsx';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+type InputProps = {
+  outerClassName?: string;
+  variant?: 'default' | 'outlined';
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export default function input({
+  outerClassName,
+  variant = 'default',
+  ...props
+}: InputProps) {
+  return (
+    <div
+      className={clsx(s.Container, s['Container_' + variant], outerClassName)}
+    >
+      <input {...props} className={clsx(s.Input, s['Input_' + variant])} />
+    </div>
+  );
+}

src/views/home/ui/offer/offer.tsx

@@ -1,6 +1,6 @@
 import s from './offer.module.scss';
 
-import { Button, Mark } from '@shared/ui';
+import { Button, Mark, Input } from '@shared/ui';
 import Image from 'next/image';
 
 import arrow from '@public/svg/arrow-tile.svg';
@@ -37,8 +37,8 @@ export default function Offer() {
         </li>
       </ul>
       <div className={s.RowForm}>
-        <input type='text' placeholder='+79991234567' />
+        <Input type='text' placeholder='+79991234567' />
-        <input type='text' placeholder='Ваше имя' />
+        <Input type='text' placeholder='Ваше имя' />
         <Button>Узнать подробности</Button>
       </div>
       <div className={s.Inner}>