fix(home): add adaptive to sections

src/views/home/services/ui.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import s from './styles.module.scss';
+import clsx from 'clsx';
+import { useState } from 'react';
+import Link from 'next/link';
+import { servicesData } from './data';
+
+enum SwitcherOption {
+  EXPERTISE = 'expertise',
+  OCENKA = 'ocenka',
+  JURIST = 'jurist',
+}
+
+function Services() {
+  const [switcher, setSwitcher] = useState<SwitcherOption>(
+    SwitcherOption.EXPERTISE,
+  );
+
+  const handleSwitch = (switcher: SwitcherOption) => () => {
+    setSwitcher(switcher);
+  };
+
+  return (
+    <section className={s.Service}>
+      <h2 className={s.Title}>Выберите услугу</h2>
+
+      <div className={s.Switcher}>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.EXPERTISE && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.EXPERTISE)}
+        >
+          Экспертиза
+        </div>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.OCENKA && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.OCENKA)}
+        >
+          Оценка
+        </div>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.JURIST && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.JURIST)}
+        >
+          Юрист
+        </div>
+      </div>
+
+      <div className={s.Grid}>
+        {servicesData[switcher].map(({ id, title, icon, url }, i) => (
+          <Link key={id} href={url}>
+            <div className={s.Tile}>
+              {icon}
+              {title}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export { Services };