tailwind + new images

docusaurus.config.js

@@ -2,6 +2,8 @@
 
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
+import tailwind from "tailwindcss";
+import autoprefixer from "autoprefixer";
 
 module.exports = {
   title: 'Robossembler',
@@ -114,4 +116,31 @@ module.exports = {
       crossorigin: 'anonymous',
     },
   ],
+  
+  plugins: [
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
+    function () {
+      return {
+        name: "follow-symlinks",
+        configureWebpack() {
+          return {
+            resolve: {
+              // Yes, leave this on false to support symlinks.
+              symlinks: false,
+            },
+          };
+        },
+      };
+    },
+  ],
 };

src/css/custom.css

@@ -6,6 +6,12 @@
  */
 
 /* You can override the default Infima variables here. */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
 :root {
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: rgb(33, 175, 144);

src/pages/index.js

@@ -5,6 +5,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
+import tailwind from "tailwindcss";
 
 const features = [
   {
@@ -12,17 +13,17 @@ const features = [
     imageUrl: 'img/servo-reducer-assembled.jpg',
     description: (
       <>  
-        Приспособление для захвата с симметричным стыковочным интерфейсом
+        Сервопривод собственной разработки с оригинальным контроллером, outrunner-двигателем и прецессирующим редуктором. Конструкция привода оптимизирована для простой сборки с минимальным количеством комплектующих. Большая часть деталей может быть изготовлена на 3D-принтере, включая статор.
       </>
     ),
     repourl: 'https://gitlab.com/robossembler/servo',
   },
   {
     title: 'Робот-манипулятор',
-    imageUrl: 'img/robossembler-arm.png',
+    imageUrl: 'img/robossembler-arm.jpg',
     description: (
       <>
-        Шестиосевой робот-манипулятор без единого металлического крепежа      
+        Реконфигурируемый шести-осевой робот-манипулятор без металлического крепежа с симметричным стыковочным интерфейсом. Количество компонентов изделия сведено к минимуму – около 100 сборочных деталей. Дизайн подразумевает автоматическую сборку – в перспективе такие роботы смогут собирать себя сами. 
       </>
     ),
     repourl: 'https://gitlab.com/robossembler/roboarm-diy-version',
@@ -32,17 +33,17 @@ const features = [
     imageUrl: 'img/winder.jpg',
     description: (
       <>
-        Сервопривод на базе контроллера собственной разработки
+        Намоточная машина для автоматического производства статоров/роторов. Программа намотки генерируется автоматически, исходя из параметров двигателя, что позволяет использовать станок для разных конфигураций малогабаритных электродвигателей. Большинство деталей станка могут быть изготовлены на 3D-принтере.
       </>
     ),
     repourl: 'https://gitlab.com/robossembler/cnc/motor-wire-winder',
   },
   {
     title: 'Фреймворк Робосборщик',
-    imageUrl: 'img/rbs-framework-simulation.jpg',
+    imageUrl: 'img/webservice.jpg',
     description: (
       <>
-        Программный комплекс для обучения роботов в виртуальных средах
+        Программный комплекс для программирования и обучения роботов на базе современных технологий робототехники: ROS 2 Jazzy, Lifecycle Nodes, Behavior Tree,
       </>
     ),
     repourl: 'https://gitlab.com/robossembler/robossembler-ros2',
@@ -58,43 +59,13 @@ function Feature({ imageUrl, title, description }) {
           <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
       )}
-      <h1>{title}</h1>
+      <h1 className="text-xl mb-2">{title}</h1>
       <p>{description}</p>
+      <p className="text-xl mb-2">{title}</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;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};