Progress on the opentwins homepage

ertis-research · Nov 29, 2023 · 4f9282d · 4f9282d
1 parent b531626
commit 4f9282d
Show file tree

Hide file tree

Showing 30 changed files with 13,128 additions and 400 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -1,6 +1,5 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
@@ -9,7 +8,7 @@ const config = {
   title: 'OpenTwins',
   tagline: 'Open Source Digital Twins Platform',
   url: 'https://ertis-research.github.io',
-  baseUrl: '/OpenTwins',
+  baseUrl: '/opentwins',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
@@ -27,7 +26,7 @@ const config = {
     defaultLocale: 'en',
     locales: ['en'],
   },
-
+  
   presets: [
     [
       'classic',
@@ -60,7 +59,7 @@ const config = {
       navbar: {
         title: 'OpenTwins',
         logo: {
-          alt: 'My Site Logo',
+          alt: 'OpenTwins Logo',
           src: 'img/logo.svg',
         },
         items: [
@@ -80,53 +79,15 @@ const config = {
       },
       footer: {
         style: 'dark',
-        links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Tutorial',
-                to: '/docs/intro',
-              },
-            ],
-          },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-              },
-              {
-                label: 'Discord',
-                href: 'https://discordapp.com/invite/docusaurus',
-              },
-              {
-                label: 'Twitter',
-                href: 'https://twitter.com/docusaurus',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Blog',
-                to: '/blog',
-              },
-              {
-                label: 'GitHub',
-                href: 'https://github.com/facebook/docusaurus',
-              },
-            ],
-          },
-        ],
         copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
       },
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },
+      colorMode: {
+        defaultMode: 'dark'
+      },
     }),
 };
 

diff --git a/docs/src/components/Homepage/customNavbar.tsx b/docs/src/components/Homepage/customNavbar.tsx
@@ -0,0 +1,46 @@
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import React from 'react';
+import ThemedImage from '@theme/ThemedImage';
+import { useColorMode } from "@docusaurus/theme-common"
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+
+export default function CustomNavbar(): JSX.Element {
+
+    return (
+        <nav style={{ height: '60px', position: 'fixed', display: 'inline-flex', textAlign: 'center', alignItems: 'center', width: '100%' }} className='myNavbar'>
+            <div style={{ display: 'flex', justifyContent: 'flex-start', width: '100%' }} className='margin-left--lg'>
+                <Link
+                    style={{ fontWeight: 'bold', fontFamily: 'RobotoMono' }}
+                    className='margin-right--lg'
+                    to="/docs/intro">
+                    documentation
+                </Link>
+                <Link
+                    style={{ fontWeight: 'bold', fontFamily: 'RobotoMono' }}
+                    to="https://ertis.uma.es/">
+                    about us
+                </Link>
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', height: '45px', width: '100%' }}>
+                <img src={useBaseUrl('/img/logo.svg')} alt="opentwins logo" style={{ position: 'absolute', margin: 'auto', height: '45px', width: '45px' }} />
+            </div>
+            <div className='margin-right--lg' style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%' }}>
+                <Link
+                    style={{ height: '24px' }}
+                    className='margin-right--md'
+                    to="https://github.com/ertis-research/OpenTwins">
+                    <ThemedImage
+                        alt="github logo"
+                        height='24px'
+                        sources={{
+                            light: useBaseUrl('/img/github_black.svg'),
+                            dark: useBaseUrl('/img/github_white.svg'),
+                        }}
+                    />
+                </Link>
+                <NavbarColorModeToggle />
+            </div>
+        </nav>
+    );
+}
diff --git a/docs/src/components/Homepage/index.tsx b/docs/src/components/Homepage/index.tsx
@@ -0,0 +1,21 @@
+import React, { Fragment } from 'react';
+import CustomNavbar from './customNavbar';
+import MainPart from './mainPart';
+import KeyFeatures from './keyFeatures';
+import UseCases from './useCases';
+import Technologies from './technologies';
+
+export default function Homepage(): JSX.Element {
+  return (
+    <Fragment>
+      <CustomNavbar/>
+      <MainPart/>
+    </Fragment>
+  );
+}
+
+/*
+      <KeyFeatures/>
+      <UseCases/>
+      <Technologies/>
+*/
diff --git a/docs/src/components/Homepage/keyFeatures.tsx b/docs/src/components/Homepage/keyFeatures.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+
+export default function KeyFeatures(): JSX.Element {
+
+    return (
+        <div style={{ backgroundColor: '#aaa69d' }}>
+            <h1>Key Features</h1>
+
+        </div>
+    );
+}
diff --git a/docs/src/components/Homepage/mainPart.tsx b/docs/src/components/Homepage/mainPart.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+
+export default function CustomNavbar(): JSX.Element {
+    return (
+        <div style={{ width: '100%', margin: 0, padding: 0 }}>
+            <div className="row" style={{ width: '100%', margin: 0, padding: 0 }}>
+                <div className='col col--5' style={{ width: '100%', margin: 0, height: '100vh', paddingLeft: 0, display: 'flex', alignItems: 'center' }}>
+                    <ThemedImage
+                        className='round-border'
+                        alt="Docusaurus themed image"
+                        style={{ height: '80%', width: '100%', objectFit: 'cover', objectPosition: 'right' }}
+                        sources={{
+                            light: useBaseUrl('/img/captura-dark.png'),
+                            dark: useBaseUrl('/img/captura-light.png'),
+                        }}
+                    />
+                </div>
+                <div className='col col--7' style={{ width: '100%', margin: 0, height: '100vh' }}>
+                    <div style={{ height: '100%', margin: 'auto', display: 'grid', alignContent: 'center' }}>
+                        <div className="wrapper">
+                            <div className="typing-demo">
+                                <span className='mainTitle'>opentwins</span>
+                            </div>
+                        </div>
+                        <p className='text--center margin-top--lg padding-horiz--xl' style={{ fontWeight: 'normal', fontFamily: 'RobotoMono' }}>
+                            Innovative <u>open-source</u> platform that specializes in <br /> developing next-gen compositional <u>digital twins</u>
+                        </p>
+
+                        <div className='center-content margin-top--lg margin-bottom--md'>
+                            <Link
+                                className="button button--primary button--lg"
+                                to="/docs/intro">
+                                Get started
+                            </Link>
+                            <Link
+                                className="button button--secondary button--lg margin-left--md"
+                                to="https://github.com/ertis-research/OpenTwins">
+                                GitHub
+                            </Link>
+                        </div>
+
+                        <div className='center-content margin-top--lg' style={{ height: '40px' }}>
+                            <ThemedImage
+                                alt="ertis logo"
+                                sources={{
+                                    light: useBaseUrl('/img/ertis_black.svg'),
+                                    dark: useBaseUrl('/img/ertis_white.svg'),
+                                }}
+                            />
+                            <ThemedImage
+                                alt="itis logo"
+                                className='margin-left--md'
+                                sources={{
+                                    light: useBaseUrl('/img/ITIS_black.svg'),
+                                    dark: useBaseUrl('/img/ITIS_white.svg'),
+                                }}
+                            />
+                            <ThemedImage
+                                alt="uma logo"
+                                className='margin-left--md'
+                                sources={{
+                                    light: useBaseUrl('/img/uma_black.png'),
+                                    dark: useBaseUrl('/img/uma_white.png'),
+                                }}
+                            />
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/docs/src/components/Homepage/styles.module.css b/docs/src/components/Homepage/styles.module.css
@@ -0,0 +1,15 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
+
+.examples {
+  background-color: #706fd3;
+}
diff --git a/docs/src/components/Homepage/technologies.tsx b/docs/src/components/Homepage/technologies.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function Technologies(): JSX.Element {
+
+    return (
+        <div style={{ backgroundColor: '#aaa69d' }}>
+            <h1>Technologies</h1>
+
+        </div>
+    );
+}
diff --git a/docs/src/components/Homepage/useCases.tsx b/docs/src/components/Homepage/useCases.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function UseCases(): JSX.Element {
+
+    return (
+        <div style={{ backgroundColor: '#aaa69d' }}>
+            <h1>Use cases</h1>
+
+        </div>
+    );
+}