fix: add content to expertise pages

src/feature/article/consultation-modal/ui.tsx

@@ -34,10 +34,12 @@ const defaultValues = {
 };
 
 type ConsultationModalProps = {
-  className?: string;
+  pageName?: string;
 };
 
-function ConsultationModal({}: ConsultationModalProps) {
+function ConsultationModal({
+  pageName = 'noname-modal',
+}: ConsultationModalProps) {
   const {
     handleSubmit,
     control,
@@ -54,7 +56,7 @@ function ConsultationModal({}: ConsultationModalProps) {
   const onSubmit = async (data: TForm) => {
     const payload = {
       ...data,
-      form: 'consultation-modal-form',
+      form: pageName,
     };
 
     try {

src/feature/article/consultation/ui.tsx

@@ -13,6 +13,7 @@ import toast from 'react-hot-toast';
 
 type ConsultationProps = {
   pageName?: string;
+  disableExpert?: boolean;
 } & TExpert;
 
 const FormSchema = z.object({
@@ -37,6 +38,7 @@ function Consultation({
   name,
   position,
   photo,
+  disableExpert = false,
 }: ConsultationProps) {
   const {
     handleSubmit,
@@ -113,11 +115,15 @@ function Consultation({
             </Button>
           </form>
         </div>
-        <div className={s.Sidebar}>
-          <Image src={photo} alt={`${position} - ${name}`} />
-          <p className={s.Title}>{name}</p>
-          <p className={s.Description}>{position}</p>
-        </div>
+        {disableExpert ? (
+          <div />
+        ) : (
+          <div className={s.Sidebar}>
+            <Image src={photo} alt={`${position} - ${name}`} />
+            <p className={s.Title}>{name}</p>
+            <p className={s.Description}>{position}</p>
+          </div>
+        )}
       </div>
     </section>
   );

src/feature/article/documents/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/feature/article/documents/styles.module.scss

@@ -0,0 +1,39 @@
+.Section {
+  display: block;
+}
+
+.Header {
+  font-family: $font-roboto;
+  font-weight: 300;
+  font-size: 32px;
+  line-height: 130%;
+  color: $color-text;
+  margin-bottom: 16px;
+}
+
+.Text {
+  font-family: $font-roboto;
+  font-weight: 400;
+  font-size: rem(16px);
+  line-height: 130%;
+  color: $color-text;
+  margin-bottom: 16px;
+}
+
+.List {
+  display: flex;
+  flex-direction: column;
+  list-style-type: disc;
+  margin-left: 16px;
+  margin-bottom: 16px;
+}
+
+.ListItem {
+  font-family: $font-roboto;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 130%;
+  color: $color-text;
+  list-style: unset;
+}
+

src/feature/article/documents/ui.tsx

@@ -0,0 +1,25 @@
+import s from './styles.module.scss';
+
+type DocumentsProps = {
+  title: string;
+  description?: string;
+  docs: string[];
+};
+
+function Documents({ title, description, docs }: DocumentsProps) {
+  return (
+    <section className={s.Section}>
+      <h3 className={s.Header}>{title}</h3>
+      <p className={s.Text}>{description}</p>
+      <ul className={s.List}>
+        {docs.map((document, index) => (
+          <li key={index} className={s.ListItem}>
+            {document}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export { Documents };

src/feature/article/index.ts

@@ -2,3 +2,5 @@ export * from './related-articles';
 export * from './consultation';
 export * from './sidebar';
 export * from './consultation-modal';
+export * from './partners';
+export * from './documents';

src/feature/article/partners/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/feature/article/partners/styles.module.scss

@@ -0,0 +1,19 @@
+.Partners {
+  .Divider {
+    width: 100%;
+    display: flex;
+    text-align: center;
+    padding: rem(40px) 0;
+
+    .Separator {
+      display: flex;
+      width: 100%;
+      margin: 0 auto;
+      min-height: 15px;
+      mask-size: 20px 100%;
+      mask-repeat: repeat-x;
+      background-color: $color-green;
+      mask-image: url(/svg/rotated-lines.svg);
+    }
+  }
+}

src/feature/article/partners/ui.tsx

@@ -0,0 +1,18 @@
+import s from './styles.module.scss';
+import { PartnersSlider } from '@shared/ui';
+
+function Partners() {
+  return (
+    <section className={s.Partners}>
+      <div className={s.Divider}>
+        <span className={s.Separator} />
+      </div>
+      <PartnersSlider />
+      <div className={s.Divider}>
+        <span className={s.Separator} />
+      </div>
+    </section>
+  );
+}
+
+export { Partners };

src/feature/article/sidebar/ui.tsx

@@ -8,7 +8,7 @@ import { useModal } from '@core/providers/modal-provider';
 import { ConsultationModal } from '@/feature/article';
 import { CONTACTS } from '@shared/const/contacts';
 
-type SidebarProps = TSidebar;
+type SidebarProps = { pageName?: string } & TSidebar;
 
 function Sidebar({
   estimate = '3',
@@ -16,9 +16,11 @@ function Sidebar({
   related,
   warrantiesTitle,
   warranties,
+  pageName,
 }: SidebarProps) {
   const modal = useModal();
-  const openModal = () => modal.showModal(<ConsultationModal />);
+  const openModal = () =>
+    modal.showModal(<ConsultationModal pageName={pageName} />);
 
   const callTo = `tel:${CONTACTS.PHONE}`;