Merge pull request #3 from as-ascii/design-system-and-navigation

Design system and navigation

Author: as-ascii

README.md

@@ -18,10 +18,10 @@ The homepage is made up of several sections. You can find the text for these sec
 
 *   **Hero (Top Section)**: `src/containers/header/home/HomeHeader.jsx`
 *   **"Have you ever wanted to..."**: `src/containers/components/home/HomeHaveYouEver.jsx`
-*   **"Unlock the Power"**: `src/containers/components/home/UnlockThePower.jsx`
+*   **"Unlock the Power" Cards**: The content for these cards is in `src/data/unlockThePowerData.js`.
 *   **Wings Section**: `src/containers/components/home/WingsSection.jsx`
-*   **Info/Formats**: `src/containers/components/home/InfoSection.jsx`
 *   **Call to Action (Bottom)**: `src/containers/CTA/CTA.jsx`
+*   **Supported Formats Grid**: The list of formats is in `src/data/supportedFormatsData.js`.
 
 **Tip:** Look for the white text inside the code. Be careful not to delete code symbols like `<p>`, `<h3>`, `</div>`, or `{`.
 

blog/2023-03-21-the-4th-industrial-revolution.md

@@ -2,7 +2,6 @@
 title: The 4th Industrial Revolution
 authors: ferid
 tags: [industrial-revolution, technology]
-image: /img/preview.jpg
 ---
 
 The 4th Industrial Revolution heralds a new era of technological fusion, where the boundaries between physical, digital, and biological realms blur. This revolution is defined by groundbreaking advancements in artificial intelligence, robotics, IoT, 3D printing, blockchain, and biotechnology. From AI-driven automation to the Internet of Things connecting our devices, the impacts are far-reaching. Jobs are transforming, businesses are digitizing, and ethical considerations are paramount. As we navigate this era, understanding the key technologies and their societal impacts becomes crucial. Let's delve into the essence of this transformative revolution and its implications for our future.

blog/2023-03-22-introduction-to-the-4th-industrial-revolution.md

@@ -2,7 +2,6 @@
 title: Introduction to the 4th Industrial Revolution
 authors: ferid
 tags: [industrial-revolution, technology]
-image: /img/preview.jpg
 ---
 
 The 4th Industrial Revolution heralds a new era of technological fusion, where the boundaries between physical, digital, and biological realms blur. This revolution is defined by groundbreaking advancements in artificial intelligence, robotics, IoT, 3D printing, blockchain, and biotechnology. From AI-driven automation to the Internet of Things connecting our devices, the impacts are far-reaching. Jobs are transforming, businesses are digitizing, and ethical considerations are paramount. As we navigate this era, understanding the key technologies and their societal impacts becomes crucial. Let's delve into the essence of this transformative revolution and its implications for our future.

blog/2023-03-23-case-studies-in-the-4th-industrial-revolution.md

@@ -2,7 +2,6 @@
 title: Case Studies in the 4th Industrial Revolution
 authors: ferid
 tags: [industrial-revolution, case-studies, technology]
-image: /img/preview.jpg
 ---
 
 Embarking on a journey through case studies, we witness firsthand the transformative power of the 4th Industrial Revolution. Smart manufacturing plants hum with the integration of IoT sensors and AI analytics, optimizing efficiency. Biotechnology revolutionizes healthcare, offering tailored treatments through gene editing and personalized medicine. Precision farming, empowered by data analytics, reshapes agriculture for sustainability. Meanwhile, autonomous vehicles promise a future of efficient, safe urban mobility. These cases illuminate the tangible impacts of advanced technologies across industries. Join us as we explore these innovations, their implementations, and the promising future they pave in this era of industrial revolution.

blog/2023-03-24-challenges-and-opportunities-of-the-4th-industrial-revolution.md

@@ -2,7 +2,6 @@
 title: Challenges and Opportunities of the 4th Industrial Revolution
 authors: ferid
 tags: [industrial-revolution, challenges, opportunities]
-image: /img/preview.jpg
 ---
 
 Within the realm of the 4th Industrial Revolution lie both challenges and opportunities that shape our socio-economic landscape. Job displacement looms as automation and AI redefine work, highlighting the urgent need for upskilling. Concerns over data privacy and cybersecurity escalate as data becomes the new currency. Yet, amid these challenges, there are immense opportunities. Innovation flourishes, propelling economic growth and market competitiveness. Technologies promote sustainability, offering solutions for a greener future. Advancements in healthcare promise personalized treatments and improved access. As we navigate this landscape, understanding these dichotomies becomes pivotal for harnessing the potential of this transformative era.

docusaurus.config.js

@@ -69,18 +69,26 @@ const config = {
         respectPrefersColorScheme: true,
       },
       navbar: {
-        title: 'Docwire',
+        title: '',
         logo: {
           alt: 'Docwire Logo',
           src: 'img/logoDocWire.JPG',
         },
         items: [
+          {to: '/about-us', label: 'About Us', position: 'left'},
+          {to: '/showcases', label: 'Showcases', position: 'left'},
           {
             href: 'https://docwire.readthedocs.io/',
             position: 'left',
-            label: 'Docs',
+            label: 'Documentation',
+          },
+          {
+            href: 'https://github.com/docwire/docwire/releases',
+            label: 'Download',
+            position: 'left',
           },
           {to: '/blog', label: 'Blog', position: 'left'},
+          {to: '/contact-us', label: 'Contact Us', position: 'right', className: 'button-pill nav-cta'},
           {
             href: 'https://github.com/docwire/docwire',
             label: 'GitHub',

src/containers/CTA/CTA-contact.jsx

@@ -4,20 +4,16 @@ import Link from '@docusaurus/Link';
 
 function CTAcontact() {
     return (
-        <div className='docwire__cta'>
-            <div className='docwire__cta-background'>
+            <div className='docwire__cta-background section card'>
                 <div className='docwire__cta-background_banner'>
                     <div className='docwire__cta-content'>
                         <h3>Give our demo a try</h3>
-                        <p>Have a go and experiment with our non-commerical license, without trial periods or gated
+                        <p className="text-lead">Have a go and experiment with our non-commercial license, without trial periods or gated
                             functions!</p>
                     </div>
                 </div>
-                <div className="docwire__cta-button">
-                    <Link to="/contact-us">Get licence</Link>
-                </div>
+                <Link to="/contact-us" className="docwire__cta-button button-pill">Get licence</Link>
             </div>
-        </div>
     )
 }
 

src/containers/CTA/CTA.jsx

@@ -3,20 +3,15 @@ import React from "react";
 
 function CTA() {
     return (
-        <div className='docwire__cta'>
-            <div className='docwire__cta-background'>
+            <div className='docwire__cta-background section card'>
                 <div className='docwire__cta-background_banner'>
                     <div className='docwire__cta-content'>
-                        <h3>Public Binaries</h3>
-                        <p>Have a go and experiment with our non-commerical license, without trial periods or gated
-                            functions!</p>
+                        <h3>Public Releases</h3>
+                        <p className="text-lead">Download the latest release and start building with our powerful SDK. Available under GPLv2 for open source, with commercial options for closed-source projects.</p>
                     </div>
                 </div>
-                <div className="docwire__cta-button">
-                    <a href="https://github.com/docwire/docwire/releases" target="_blank" rel="noreferrer">Download Binaries</a>
-                </div>
+                <a href="https://github.com/docwire/docwire/releases" target="_blank" rel="noreferrer" className="docwire__cta-button button-pill">View Releases</a>
             </div>
-        </div>
     )
 }
 

src/containers/CTA/cta.css

@@ -1,81 +1,39 @@
-.docwire__cta {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    display: flex;
-}
-
 .docwire__cta-background {
     background-size: 300% 300%;
     animation: gradient 6s ease infinite;
-    width: var(--container-width);
-    height: auto;
-    max-height: none;
-    max-width: var(--container-max-width);
-    min-height: auto;
-    min-width: auto;
     color: var(--brand-white);
     background-color: var(--brand-black);
     background-image: var(--gradient-bar);
-    border-radius: 10px;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 5vh;
-    padding: 5vh 5%;
+    padding: 3rem 5%;
+    gap: 2rem;
     display: flex;
+    flex-direction: row;
+
+    /* Contextual Override: Buttons inside this dark container should use surface colors */
+    --color-button-bg: var(--color-btn-on-dark-bg);
+    --color-button-text: var(--color-btn-on-dark-text);
 }
 
 .docwire__cta-background_banner {
-    width: 45%;
+    flex: 1;
     flex-direction: column;
     justify-content: center;
-    padding-right: 0;
     display: flex;
 }
 
 .docwire__cta-content h3 {
-    color: var(--brand-white);
-    margin-top: 0;
     margin-bottom: 24px;
-    line-height: 1;
-    font-family: var(--font-family);
-    font-size: var(--font-size-h3);
-    text-align: left;
 }
 
 .docwire__cta-content p {
-    width: auto;
-    max-width: var(--container-max-width);
-    font-family: var(--font-family-Open-Sans);
-    font-weight: 600;
-    line-height: 1.4;
-    text-decoration: none;
-    font-size: var(--font-size-body-large);
-    color: var(--brand-white);
     margin-bottom: 0;
 }
 
 .docwire__cta-button {
-    -webkit-text-fill-color: inherit;
-    background-color: var(--color-text);
-    background-clip: border-box;
-    margin-left: 30px;
-    width: 12em;
-    height: 3.5em;
-    max-height: 55px;
-    max-width: 190px;
-    font-size: var(--font-size-body);
-    color: var(--color-bg);
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    font-family: var(--font-family);
-    display: flex;
-    padding: 9px 15px;
-    font-weight: 600;
-    text-decoration: none;
-    line-height: inherit;
-    cursor: pointer;
+    margin-left: 0;
+    flex-shrink: 0;
 }
 
 @keyframes gradient {
@@ -90,26 +48,11 @@
     }
 }
 
-@media screen and (max-width: 991px) {
-    .docwire__cta-background {
-        width: 90vw;
-        margin-bottom: 15vh;
-    }
-
-    .docwire__cta-button {
-        width: 180px;
-        height: 60px;
-        font-size: var(--font-size-body);
-        max-height: none;
-        max-width: none;
-        border-radius: 5px;
-    }
-}
-
 @media screen and (max-width: 767px) {
     .docwire__cta-background {
         flex-direction: column;
-        align-items: flex-start;
+        align-items: center;
+        text-align: center;
         padding: 40px;
     }
 
@@ -118,28 +61,17 @@
     }
 
     .docwire__cta-button {
-        margin-top: 25px;
+        margin-top: 0;
     }
 }
 
 @media screen and (max-width: 479px) {
     .docwire__cta-background {
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: flex-start;
         margin-bottom: 5vh;
         padding: 24px;
     }
 
     .docwire__cta-content {
         width: 100%;
     }
-
-    .docwire__cta-button {
-        width: 150px;
-        height: 48px;
-        justify-content: center;
-        margin-left: 0;
-        font-size: var(--font-size-small);
-    }
 }

src/containers/components/contactUs/Contact.jsx

@@ -3,24 +3,22 @@ import Form from "./Form";
 function Contact() {
 
     return (
-        <div className="docwire__contact">
-            <div className="docwire__contact-bg">
+            <div className="docwire__contact-bg section">
                 <div className="docwire__contact-text">
-                    <div className="docwire__contact-text_h1">
+                    <h1 className="docwire__contact-text_h1 text-display">
                         How Can We Help You?
-                    </div>
-                    <div className="docwire__contact-text_section">
+                    </h1>
+                    <p className="docwire__contact-text_section text-lead">
                         Want access to our non-commercial demo license, ask questions about our functions or simply inquire
                         about pricing? Fill in the form and we will get back to you!
-                    </div>
+                    </p>
                 </div>
                 <div className="docwire__contact-form">
-                    <div className="docwire__contact-form_form">
+                    <div className="docwire__contact-form_form card">
                         <Form />
                     </div>
                 </div>
             </div>
-        </div>
     )
 }