main page refactor to cards

docusaurus.config.js

@@ -4,7 +4,7 @@ const katex = require('rehype-katex');
 module.exports = {
   title: 'Robossembler',
   tagline: 'Отворённая Робототехника',
-  url: 'https://robossembler.gitlab.io',
+  url: 'https://robossembler.org',
   baseUrl: '/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',

src/pages/index.js

@@ -8,94 +8,93 @@ import styles from './styles.module.css';
 
 const features = [
   {
-    title: 'Роботы-манипуляторы',
+    title: 'Робот-манипулятор',
     imageUrl: 'img/robossembler-arm.png',
     description: (
       <>
-        <ul>
-          <li><a href="https://gitlab.com/robossembler/roboarm-diy-version">Robossembler Arm</a> - 6-DoF манипулятор для изготовления с помощью 3D-печати</li>
-          <li><a href="https://gitlab.com/robossembler/roboarm">Манипулятор</a> - 6-DoF для изготовления с помощью литья в <a href="https://gitlab.com/robossembler/cnc/roboarm-link-mold" target="_blank" rel="noopener noreferrer">прессформе</a></li>
-        </ul>
+        Шестиосевой робот-манипулятор без единого металлического крепежа, адаптированный для автоматической сборки
       </>
     ),
+    repourl: 'https://gitlab.com/robossembler/roboarm-diy-version',
   },
   {
-    title: 'Приспособления',
-    imageUrl: 'img/grip-tool.png',
+    title: 'Сервопривод',
+    imageUrl: 'img/servo-reducer-assembled.jpg',
     description: (
-      <>
-        <ul>
-          <li><a href="https://gitlab.com/robossembler/arm-tools/grip-tool" target="_blank" rel="noopener noreferrer">Механический захват</a> <i>прототипируется</i></li>
-          <li><a href="https://gitlab.com/robossembler/arm-tools/3d-print-tool" target="_blank" rel="noopener noreferrer">3D-печать</a>, <a href="https://gitlab.com/robossembler/arm-tools/extrude-melt-tool" target="_blank" rel="noopener noreferrer">Подача компаунда</a>, <a href="https://gitlab.com/robossembler/arm-tools/soldering-tool" target="_blank" rel="noopener noreferrer">Пайка</a>, <a href="https://gitlab.com/robossembler/arm-tools/welding-tool" target="_blank" rel="noopener noreferrer">Сварка</a>, <a href="https://gitlab.com/robossembler/arm-tools/post-processing-tool" target="_blank" rel="noopener noreferrer">Фрезерная и пост-обработка</a>, <a href="https://gitlab.com/robossembler/arm-tools/scan-tool" target="_blank" rel="noopener noreferrer">Сканирование и съёмка</a> <i>в разработке</i></li>
-        </ul>
+      <>  
+        Приспособление для захвата с симметричным стыковочным интерфейсом
       </>
     ),
+    repourl: 'https://gitlab.com/robossembler/servo',
   },
   {
-    title: 'Серводвигатели',
-    imageUrl: 'img/motor.png',
+    title: 'Станок намотки',
+    imageUrl: 'img/winder1.webp',
     description: (
       <>
-        Оригинальные модели серводвигателей, ориентированные для автоматического производства
-        <ul>
-          <li><a href="https://gitlab.com/robossembler/roboarm-diy-version/-/tree/main/src/MOTOR" target="_blank" rel="noopener noreferrer">Сервопривод</a> для Robossembler Arm</li>
-          <li><a href="https://gitlab.com/robossembler/servo" target="_blank" rel="noopener noreferrer">Сервопривод</a> для литьевого манипулятора</li>
-        </ul>
+        Сервопривод на базе контроллера собственной разработки
       </>
     ),
+    repourl: 'https://gitlab.com/robossembler/cnc/motor-wire-winder',
   },
   {
-    title: 'Производственные модули',
-    imageUrl: 'img/workspace.png',
+    title: 'Robossembler Framework',
+    imageUrl: 'img/rbs-framework-simulation.jpg',
     description: (
       <>
-        Новые способы масштабирования роботизированных ячеек
-        <li><a href="https://gitlab.com/robossembler/cnc/cubic-modular-workspace" target="_blank" rel="noopener noreferrer">Cubic</a> - ячейки на базе кубов</li>
-        <li><a href="https://gitlab.com/robossembler/cnc/roboarm-workspace" target="_blank" rel="noopener noreferrer">Hexagonal</a> - ячейки на базе плоских шестигранников</li>
-      </>
-    ),
-  },
-  {
-    title: 'Прикладное ПО',
-    imageUrl: 'img/ros2.jpg',
-    description: (
-      <>
-        Разработка программного обеспечения с открытым исходным кодом для управления роботами
-        <ul>
-          <li><a href="docs/robossembler-framework/" target="_blank" rel="noopener noreferrer">Robossembler Framework</a> - комплекс ПО для автоматизации сборки произвольных изделий роботами-манипуляторами</li>
-        </ul>
-      </>
-    ),
-  },
-  {
-    title: 'Инструменты поддержки CAD',
-    imageUrl: 'img/freecad.svg',
-    description: (
-      <>
-        Плагины к открытым системам проектирования для автоматизации разработки и производства
-        <ul>
-          <li><a href="https://gitlab.com/robossembler/forks/ARBench" target="_blank" rel="noopener noreferrer">ARBench</a> - плагин FreeCAD для подготовки изделий к роботизированной сборке</li>
-        </ul>
+        Программный комплекс для обучения роботов в виртуальных средах
       </>
     ),
+    repourl: 'https://gitlab.com/robossembler/robossembler-ros2',
   },
 ];
 
 function Feature({ imageUrl, title, description }) {
   const imgUrl = useBaseUrl(imageUrl);
   return (
-    <div className={clsx('col col--4', styles.feature)}>
+    <div className={clsx('col col--6', styles.feature)}>
       {imgUrl && (
         <div className="text--center">
           <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
       )}
-      <h3>{title}</h3>
+      <h1>{title}</h1>
       <p>{description}</p>
     </div>
   );
 }
 
+function FeatureCard({ imageUrl, title, description, repourl }) {
+  const imgUrl = useBaseUrl(imageUrl);
+  return (
+    <div className={clsx('col col--6', styles.feature)}>
+      <div className="card-demo">
+        <div className="card">
+          {imgUrl && (
+            <div className="card__image">
+              <img
+                src={imgUrl}
+                alt={title}
+                title={title}
+              />
+            </div>
+          )}
+          <div className="card__body">
+            <h1>{title}</h1>
+            <small>{description}</small>
+          </div>
+          <div className="card__footer">
+            <div>
+              <a class="button button--block button--primary" href={repourl}>Подробнее</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
 export default function Home() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
@@ -125,7 +124,7 @@ export default function Home() {
             <div className="container">
               <div className="row">
                 {features.map((props, idx) => (
-                  <Feature key={idx} {...props} />
+                  <FeatureCard key={idx} {...props} />
                 ))}
               </div>
             </div>

src/pages/styles.module.css

@@ -32,6 +32,5 @@
 }
 
 .featureImage {
-  height: 200px;
-  width: 200px;
+  width: 100%;
 }