diff --git a/img/backend.png b/img/backend.png new file mode 100644 index 0000000..c530f5e Binary files /dev/null and b/img/backend.png differ diff --git a/img/blockchain.png b/img/blockchain.png new file mode 100644 index 0000000..474b7a6 Binary files /dev/null and b/img/blockchain.png differ diff --git a/img/db.png b/img/db.png new file mode 100644 index 0000000..db7e945 Binary files /dev/null and b/img/db.png differ diff --git a/img/mobile+pc.png b/img/mobile+pc.png new file mode 100644 index 0000000..de64979 Binary files /dev/null and b/img/mobile+pc.png differ diff --git a/public/img/backend.png b/public/img/backend.png new file mode 100644 index 0000000..c530f5e Binary files /dev/null and b/public/img/backend.png differ diff --git a/public/img/blockchain.png b/public/img/blockchain.png new file mode 100644 index 0000000..474b7a6 Binary files /dev/null and b/public/img/blockchain.png differ diff --git a/public/img/db.png b/public/img/db.png new file mode 100644 index 0000000..db7e945 Binary files /dev/null and b/public/img/db.png differ diff --git a/public/img/mobile+pc.png b/public/img/mobile+pc.png new file mode 100644 index 0000000..de64979 Binary files /dev/null and b/public/img/mobile+pc.png differ diff --git a/public/index.html b/public/index.html index 588ca4b..0f8bf04 100644 --- a/public/index.html +++ b/public/index.html @@ -61,6 +61,7 @@ + diff --git a/src/v2/i18n.js b/src/v2/i18n.js index 19dd8ad..4b83a4b 100644 --- a/src/v2/i18n.js +++ b/src/v2/i18n.js @@ -25,11 +25,39 @@ const resources = { "with dashboard, PMS, and even AI forecasts.": "with dashboard, PMS, and even AI forecasts.", "Product/Software development": "Product/Software development", + "We provide enterprise-grade software planning and development": "We provide enterprise-grade software planning and development", + "Mobile + PC": "Mobile + PC", + "Blockchain": "Blockchain", + "Machine Learning": "Machine Learning", + "Machine Learning Algorithms": "Machine Learning Algorithms", + "Computer Vision": "Computer Vision", + "Supervised Machine Learning": "Supervised Machine Learning", + "Unsupervised Machine Learning": "Unsupervised Machine Learning", + "Deep Learning": "Deep Learning", + "Neural Networks": "Neural Networks", + "Reinforcement Learning": "Reinforcement Learning", + "Predictive Learning": "Predictive Learning", + "Upcoming product ;)": "Upcoming product ;)", + "Medium articles": "Medium articles", + "We write articles at medium ranging from mobile development lifehacks to Kubernetes and Machine Learning, you should definitely check them out": "We write articles at medium ranging from mobile development lifehacks to Kubernetes and Machine Learning, you should definitely check them out", + "Open articles": "Open articles", + "Behaiv": "Behaiv", + "Behaiv is a high-level AI tool that helps users to navigate faster through the app,": "Behaiv is a high-level AI tool that helps users to navigate faster through the app,", + "predict what users want to open and take appropriate actions.": "predict what users want to open and take appropriate actions.", + "It was developed with a focus on simplicity of usage.": "It was developed with a focus on simplicity of usage.", + "Instead of overwhelming developers with burden of implementation,": "Instead of overwhelming developers with burden of implementation,", + "they only need to write few lines of code.": "they only need to write few lines of code.", + "Our company covers Java, Swift, Python and Javascript versions of this library": "Our company covers Java, Swift, Python and Javascript versions of this library", + "Look through our library": "Look through our library", + "YouTube Lessons": "YouTube Lessons", + "We have small youtube channel where we put some lessons and discussions about different AI, ML and Software Engineering topics": "We have small youtube channel where we put some lessons and discussions about different AI, ML and Software Engineering topics", + "Visit YouTube channel": "Visit YouTube channel", + "Lovepons": "Lovepons", "Your next project?": "Your next project?", "IOT/Scooter Business services": "IOT/Scooter Business services", @@ -54,6 +82,8 @@ const resources = { "Coming soon": "Coming soon :C", "We're working on our customer panel, let us notify you when it's done.": "We're working on our customer panel, let us notify you when it's done." + + } }, de: { @@ -78,11 +108,40 @@ const resources = { "with dashboard, PMS, and even AI forecasts.": "mit Dashboard-, PMS- und sogar AI-Vorhersagen.", "Product/Software development": "Produkt/Software Entwicklung", + "We provide enterprise-grade software planning and development": "Wir bieten Softwareplanung und -entwicklung für Unternehmen", + "Mobile + PC": "Mobile + PC", + "Blockchain": "Blockchain", + "Machine Learning": "Machine Learning", + "Machine Learning Algorithms": "Machine Learning Algorithmen", + "Computer Vision": "Computer Vision", + "Supervised Machine Learning": "Supervised Machine Learning", + "Unsupervised Machine Learning": "Unsupervised Machine Learning", + "Deep Learning": "Deep Learning", + "Neural Networks": "Neural Networks", + "Reinforcement Learning": "Reinforcement Learning", + "Predictive Learning": "Predictive Learning", + "Upcoming product ;)": "Bevorstehendes Produkt ;)", + "Medium articles": "Medium Artikel", + "We write articles at medium ranging from mobile development lifehacks to Kubernetes and Machine Learning, you should definitely check them out": "Wir schreiben Artikel auf Medium, die von Lifehacks für die mobile Entwicklung über Kubernetes bis hin zu maschinellem Lernen reichen", + "Open articles": "Artikel öffnen", + "Behaiv": "Behaiv", + "Behaiv is a high-level AI tool that helps users to navigate faster through the app," : "Behaiv ist ein hochrangiges KI-Tool, mit dem Benutzer schneller durch die App navigieren können,", + "predict what users want to open and take appropriate actions." : "vorhersagen, welche Benutzer öffnen möchten, und geeignete Maßnahmen ergreifen.", + "It was developed with a focus on simplicity of usage.": "Es wurde mit dem Schwerpunkt auf Benutzerfreundlichkeit entwickelt.", + "Instead of overwhelming developers with burden of implementation,": "Anstatt Entwickler mit Implementierungslast zu überfordern,", + "they only need to write few lines of code.": "müssen sie nur wenige Codezeilen schreiben.", + "Our company covers Java, Swift, Python and Javascript versions of this library": "Unser Unternehmen umfasst Java-, Swift-, Python- und Javascript-Versionen dieser Bibliothek", + "Look through our library": "Schauen Sie sich unsere Bibliothek an", + "YouTube Lessons": "YouTube-Lektionen", + "We have small youtube channel where we put some lessons and discussions about different AI, ML and Software Engineering topics": "Wir haben einen kleinen Youtube-Kanal, in dem wir einige Lektionen und Diskussionen zu verschiedenen AI-, ML- und Software-Engineering-Themen anbieten", + "Visit YouTube channel": "Besuchen Sie den YouTube-Kanal", + + "Lovepons": "Lovepons", "Your next project?": "Dein nächstes Projekt?", "IOT/Scooter Business services": "IOT / Scooter Business-Dienstleistungen", diff --git a/src/v2/modules/views/ProductCategories.js b/src/v2/modules/views/ProductCategories.js index 5729d5a..03cd748 100644 --- a/src/v2/modules/views/ProductCategories.js +++ b/src/v2/modules/views/ProductCategories.js @@ -10,7 +10,6 @@ import CardActionArea from "@material-ui/core/CardActionArea"; import CardContent from "@material-ui/core/CardContent"; import CardMedia from "@material-ui/core/CardMedia"; import {useTranslation} from "react-i18next"; -import Markdown from "../components/Markdown"; import Button from "../components/Button"; const styles = theme => ({ @@ -95,6 +94,76 @@ const styles = theme => ({ media: { height: '30vh', }, + dialogTitle: { + color: '#080808', + fontFamily: "Open Sans", + font: '700 20px/45px sans-serif', + textTransform: 'uppercase', + textAlign: 'center', + marginTop: '48px' + }, + dialogSubtitle: { + color: '#807f7f', + fontFamily: "Open Sans", + font: '400, 16px/45px sans-serif', + textAlign: 'center', + paddingBottom: '20px', + }, + dialogproductAndSoftBlock: { + display: 'flex', + borderBottom: '2px solid #e6e5e5', + padding: '25px 100px', + '&:last-child': { + borderBottom: 'none', + }, + }, + dialogproductAndSoftItem: { + flex: '50%', + order: '1' + }, + dialogproductAndSoftItemOrder: { + flex: '50%', + order: '2' + }, + dialogproductAndSoftImg: { + order: '2', + }, + dialogproductAndSoftImgOrder: { + order: '1', + }, + dialogproductAndSoftItem__title: { + color: '#080808', + fontFamily: "Open Sans", + font: '700 20px/45px sans-serif', + textTransform: 'uppercase', + padding: '30px 0' + }, + dialogproductAndSoftItem__titleWithoutPadding: { + color: '#080808', + fontFamily: "Open Sans", + font: '700 20px/45px sans-serif', + textTransform: 'uppercase', + padding: '30px 0', + marginLeft: '-60px', + marginRight: '-40px', + }, + dialogproductAndSoftItem__wrap: { + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', + maxHeight: '120px', + }, + dialogproductAndSoftItem__item: { + color: '#807f7f', + fontFamily: "Open Sans", + font: '400, 14px/45px, sans-serif', + }, + dialogproductAndSoftItem__wrapLast: { + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', + maxHeight: '170px', + } }); const Transition = React.forwardRef(function Transition(props, ref) { @@ -116,47 +185,211 @@ function ProductCategories(props) { setDetailsDialogOpen(false); }; + const productAndSoftData = { + backend: ['Spring', 'JavaEE', 'Quarkus', 'Netty', 'Jetty', 'Flask', 'Tensorflow', 'Neo4j', 'Laravel', 'NodeJS'], + mobileAndPc: ['Android SDK', ' JavaSE(6-10)', 'Android Mobile', 'Wear', 'TV', 'JavaFX', 'IOS'], + db: ['SQL(SQLite,MySQL, PostgreSQL)', 'Realm', 'ObjectBox', 'JavaFx', 'Elasticsearch', 'MongoDB', 'Redis'], + blockchain: ['Corda', 'Ethereum', 'Hyperledger'], + machineLearning: ['TensorFlow', 'PyTorch', 'Keras', 'Matplotlib', 'Seaborn', 'ggplot', 'Spacy', 'Scrapy', 'Selenium', 'Beautiful Soup 4', 'requests', 'Scikit-learn', 'Scipy', 'Numpy', 'Pandas', 'Cvxpy'] + } + + const productAndSoftContent = [ + { + block: (
+
Backend:
+
+ { + productAndSoftData.backend.map ((elem, index) => { + return
- {elem}
+ }) + } +
+
), + imgUrl: '/img/backend.png', + }, + { + block: (
+
{t('Mobile + PC')}:
+
+ { + productAndSoftData.mobileAndPc.map ((elem, index) => { + return
- {elem}
+ }) + } +
+
), + imgUrl: '/img/mobile+pc.png', + }, + { + block: (
+
DB:
+
+ { + productAndSoftData.db.map ((elem, index) => { + return
- {elem}
+ }) + } +
+
), + imgUrl: '/img/db.png', + }, + { + block: (
+
{t('Blockchain')}:
+
+ { + productAndSoftData.blockchain.map ((elem, index) => { + return
- {elem}
+ }) + } +
+
), + imgUrl: '/img/blockchain.png', + }, + { + block: (
+
{t('Machine Learning')}:
+
+ { + productAndSoftData.machineLearning.map ((elem, index) => { + return
- {elem}
+ }) + } +
+
), + imgUrl: '/img/backend.png', + } + ] + + const machineLearningContent = [ + { + block: (
+
{t('Machine Learning Algorithms')}
+
+
+
), + imgUrl: '/img/backend.png', + }, + { + block: (
+
{t('Computer Vision')}
+
+
+
), + imgUrl: '/img/mobile+pc.png', + }, + { + block: (
+
{t('Supervised Machine Learning')}
+
+
+
), + imgUrl: '/img/mobile+pc.png', + }, + { + block: (
+
{t('Unsupervised Machine Learning')}
+
+
+
), + imgUrl: '/img/db.png', + }, + { + block: (
+
{t('Deep Learning')}
+
+
+
), + imgUrl: '/img/blockchain.png', + }, + { + block: (
+
{t('Neural Networks')}
+
+
+
), + imgUrl: '/img/backend.png', + }, + { + block: (
+
{t('Reinforcement Learning')}
+
+
+
), + imgUrl: '/img/blockchain.png', + }, + { + block: (
+
{t('Predictive Learning')}
+
+
+
), + imgUrl: '/img/db.png', + } + ] + const images = [ { url: '/img/showcase-software-dev.jpg', - title: 'Product/Software development', + title: t('Product/Software development'), width: '40%', description: (
- - We provide enterprise-grade software planning and development. + + {t('We provide enterprise-grade software planning and development')}. - { - `* **Backend**: Spring, JavaEE, Quarkus, Netty, Jetty, Flask, Tensorflow, Neo4j, Laravel, NodeJS -* **Mobile + PC**: Android SDK, JavaSE(6-10), Android Mobile, Wear, TV, JavaFX, IOS -* **DB**: SQL(SQLite,MySQL, PostgreSQL), Realm, ObjectBox, JavaFx, Elasticsearch, MongoDB, Redis -* **Blockchain**: Corda, Ethereum, Hyperledger -* **Machine learning**: TensorFlow, PyTorch, Keras, Matplotlib, Seaborn, ggplot, Spacy, Scrapy, Selenium, Beautiful Soup 4, requests, Scikit-learn, Scipy, Numpy, Pandas, Cvxpy`.toString() + { + productAndSoftContent.map((elem, index) => { + return index%2 === 0 ? +
+
{elem.block}
+ +
+ : +
+
{elem.block}
+ +
+ }) } -
) }, { url: '/img/robot.jpg', - title: 'Machine Learning', + title: t('Machine Learning'), width: '20%', + description: (
+ { + machineLearningContent.map((elem, index) => { + return index%2 === 0 ? +
+
{elem.block}
+ +
+ : +
+
{elem.block}
+ +
+ }) + } +
) }, { url: '/img/showcase-3.png', - title: 'Upcoming product ;)', + title: t('Upcoming product ;)'), width: '40%', }, { url: '/img/medium.png', - title: 'Medium articles', + title: t('Medium articles'), width: '38%', description: (
- We write articles at medium ranging from mobile development lifehacks to Kubernetes and Machine Learning, - you should definitely check them out + {t('We write articles at medium ranging from mobile development lifehacks to Kubernetes and Machine Learning, you should definitely check them out')}
) }, { url: '/img/behaiv_usage.png', - title: 'Behaiv', + title: t('Behaiv'), width: '38%', description: (
- Behaiv is a high-level AI tool that helps users to navigate faster through the app, - predict what users want to open and take appropriate actions. - It was developed with a focus on simplicity of usage. - Instead of overwhelming developers with burden of implementation, - they only need to write few lines of code. + {t('Behaiv is a high-level AI tool that helps users to navigate faster through the app,')} + {t('predict what users want to open and take appropriate actions.')} + {t('It was developed with a focus on simplicity of usage.')} + {t('Instead of overwhelming developers with burden of implementation,')} + {t('they only need to write few lines of code.')} - Our company covers Java, Swift, Python and Javascript versions of this library + {t('Our company covers Java, Swift, Python and Javascript versions of this library')}
) }, { url: '/img/youtube.png', - title: 'YouTube Lessons', + title: t('YouTube Lessons'), width: '24%', description: (
- We have small youtube channel where we put some lessons and discussions about different AI, ML and Software Engineering topics + {t('We have small youtube channel where we put some lessons and discussions about different AI, ML and Software Engineering topics')}
) @@ -224,19 +457,19 @@ function ProductCategories(props) { { url: '/img/showcase-lovepons.png', - title: 'Lovepons', + title: t('Lovepons'), width: '40%', }, { url: '/img/next_project.jpg', - title: 'Your next project?', + title: t('Your next project?'), width: '20%', }, { url: '/img/bg-showcase-1.jpg', - title: 'IOT/Scooter Business services', + title: t('IOT/Scooter Business services'), width: '40%', }, ]; @@ -278,6 +511,7 @@ function ProductCategories(props) { ))} - - - - - {selectedDialogImage.title} - - - {selectedDialogImage.description} - - - + { + selectedDialogImage.title === t('Product/Software development') || selectedDialogImage.title === t('Machine Learning') + ? + + + {selectedDialogImage.title} + + + {selectedDialogImage.description} + + + : + + + + + {selectedDialogImage.title} + + + {selectedDialogImage.description} + + + + } );