Update landing page and other tweaks

docs/blog/2020-10-31-curated-code-cad.md

@@ -12,9 +12,6 @@ tags: []
 
 <img src="https://raw.githubusercontent.com/Irev-Dev/repo-images/main/images/CURATED-CODE-CAD-BANNER2.jpg" />
 
-### [See the web page version](https://kurthutten.com/blog/curated-code-cad/)
-
-
 ## What is Code-CAD?
 It's software that allows you to define 3D CAD models with code. It's a niche popular amongst software devs for obvious reasons — it gives you parametric models almost by default and it's easy to maintain and extend models within a team over time when paired with git. The coding nature of it allows teams to build their own abstraction for re-use and quick prototyping. The [Cadhub](https://cadhub.xyz/) homepage has a good breakdown of the potential of the Code-CAD paradigm. Code-CAD is not to be confused with 3d geometry libraries, Code-CAD instead has opinionated abstractions for quickly developing mechanical parts.
 

docs/docs/definitive-beginners/the-basics.mdx

@@ -91,7 +91,7 @@ The beauty of this is two fold,
 1) We have now given lots of context about what value of `5` actually means, that it relates to the pivot radius and
 2) if we ever what to change this value it's easy to just change the first line and the rest will update, for example we can more than double the value and the model stays cohesive, here it is with `pivotRadius=11;`
 
-<Image img={bigRadius} style={{backgroundSize: 'contain'}} />
+<Image img={bigRadius} style={{backgroundSize: 'contain', marginBottom: '1rem'}} />
 
 Let's clean up the rest of the magic numbers.
 

docs/docs/why-code-cad.mdx

@@ -2,8 +2,6 @@
 title: Why OpenSCAD
 ---
 
-## Code CAD
-
 OpenSCAD is a Code-CAD, which means models are made from a code script rather than from a series of clicks in a user interface.
 If you want an un-bias opinion on if this is a good paradigm you'll have to look elsewhere because CadHub are massive advocates for it.
 

docs/docusaurus.config.js

@@ -1,7 +1,7 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'CadHub',
-  tagline: 'Pushing the advent of CodeCad',
+  tagline: '',
   url: 'https://your-docusaurus-test-site.com',
   baseUrl: '/',
   onBrokenLinks: 'throw',
@@ -12,9 +12,9 @@ module.exports = {
   plugins: ['@docusaurus/plugin-ideal-image', 'docusaurus-tailwindcss-loader'],
   themeConfig: {
     navbar: {
-      title: 'My Site',
+      title: 'CadHub',
       logo: {
-        alt: 'My Site Logo',
+        alt: 'CadHub Logo',
         src: 'img/logo.svg',
       },
       items: [

docs/src/pages/index.js

@@ -1,95 +1,147 @@
-import React from 'react';
+import React from 'react'
-import clsx from 'clsx';
+import clsx from 'clsx'
-import Layout from '@theme/Layout';
+import Layout from '@theme/Layout'
-import Link from '@docusaurus/Link';
+import Link from '@docusaurus/Link'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import useBaseUrl from '@docusaurus/useBaseUrl'
-import styles from './styles.module.css';
+import styles from './styles.module.css'
-
-const features = [
-  {
-    title: 'Easy to Use',
-    imageUrl: 'img/undraw_docusaurus_mountain.svg',
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    imageUrl: 'img/undraw_docusaurus_tree.svg',
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    imageUrl: 'img/undraw_docusaurus_react.svg',
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({imageUrl, title, description}) {
-  const imgUrl = useBaseUrl(imageUrl);
-  return (
-    <div className={clsx('col col--4', styles.feature)}>
-      {imgUrl && (
-        <div className="text--center">
-          <img className={styles.featureImage} src={imgUrl} alt={title} />
-        </div>
-      )}
-      <h3>{title}</h3>
-      <p>{description}</p>
-    </div>
-  );
-}
 
 export default function Home() {
-  const context = useDocusaurusContext();
+  const context = useDocusaurusContext()
-  const {siteConfig = {}} = context;
+  const { siteConfig = {} } = context
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Description will go into a meta tag in <head />"
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    >
+      <header className={clsx('bg-pink-100', styles.heroBanner)}>
         <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
+          <h1 className="font-ropa-sans text-6xl pb-8 text-indigo-600">
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
+            {siteConfig.title}
+          </h1>
+          <p className="font-ropa-sans text-indigo-700 max-w-3xl mx-auto text-lg">
+            Cadhub is a community hub for Code-CAD projects aiming to push the
+            paradigm forward.
+          </p>
+          <p className="font-ropa-sans text-indigo-700 max-w-3xl mx-auto text-lg">
+            Code-CAD is the premier way to design parts, it fits into
+            software-dev work-flow and is right level of abstraction having,
+            parts defined as auditable scripts.
+          </p>
+          <p className="font-ropa-sans text-indigo-700 max-w-3xl mx-auto text-lg pb-6">
+            We have beta integrations with OpenSCAD and CadQuery. The best way
+            to learn more is to:
+          </p>
           <div className={styles.buttons}>
             <Link
               className={clsx(
-                'button button--outline button--secondary button--lg',
+                'font-mono border-indigo-100 border rounded-md py-2 px-4 bg-pink-200 text-indigo-800 font-bold shadow hover:shadow-md',
-                styles.getStarted,
+                styles.getStarted
               )}
-              to={useBaseUrl('docs/')}>
+              to={useBaseUrl('docs/')}
+            >
               Get Started
             </Link>
           </div>
         </div>
       </header>
       <main>
-        {features && features.length > 0 && (
+        <div className="max-w-6xl mx-auto px-2 pb-32">
-          <section className={styles.features}>
+          <h2 className="text-indigo-700 text-5xl font-roboto my-16 tracking-widest font-light">
-            <div className="container">
+            What's the potential of code-cad?
-              <div className="row">
+          </h2>
-                {features.map((props, idx) => (
+          <MarketingPoint
-                  <Feature key={idx} {...props} />
+            leadingPoint="Communication"
-                ))}
+            title="Tech-drawing and CAD as communication medium"
+          >
+            <p className="max-w-2xl">
+              Have you ever started frantically reaching for a pen when trying
+              to explain an idea?
+            </p>
+            <p className="pt-4">
+              Engineers love drawings and CAD extends that, though now
+              communicating with machines is just as important as with
+              colleagues. What better way to do that than with a deterministic,
+              expressive and auditable script?
+            </p>
+          </MarketingPoint>
+          <div className="mt-24">
+            <div className="text-2xl text-pink-400 font-bold tracking-widest">
+              Extensible
+            </div>
+            <h3 className="text-indigo-700 text-4xl mt-4">
+              If <span className="line-through">it bleeds</span> it's text, we
+              can <span className="line-through">kill</span> hack it
+            </h3>
+            <div className="text-gray-600 max-w-3xl text-2xl font-light mt-4">
+              <ul className="list-disc pl-6">
+                <li>Build your own helper functions and abstractions</li>
+                <li>
+                  Trigger{' '}
+                  <a href="https://en.wikipedia.org/wiki/Finite_element_method">
+                    FEM
+                  </a>{' '}
+                  or regenerate tool paths with a{' '}
+                  <a href="https://www.redhat.com/en/topics/devops/what-is-ci-cd">
+                    CI/CD
+                  </a>{' '}
+                  process
+                </li>
+                <li>
+                  Auto-generate a{' '}
+                  <a href="https://en.wikipedia.org/wiki/Bill_of_materials">
+                    BOM
+                  </a>
+                </li>
+                <li>
+                  Integrate it into your{' '}
+                  <a href="https://www.ptc.com/en/technologies/plm">PLM</a>{' '}
+                  tools
+                </li>
+              </ul>
             </div>
           </div>
-          </section>
+          <MarketingPoint
-        )}
+            leadingPoint="Git Good"
+            title="All of the benefits of version control"
+          >
+            <p>
+              Team coordination doesn't get any better than git. Multiple people
+              working on a complex assembly without treading on each other --
+              what else is there to say?
+            </p>
+          </MarketingPoint>
+          <MarketingPoint
+            leadingPoint="Rise of the developer"
+            title="Leverage a growing industry"
+          >
+            <p>
+              Software is taking over the world, and so are developers. In the
+              U.S. developers are 1.4M strong and are predicted to increase
+              their{' '}
+              <a href="https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm">
+                ranks by 22%
+              </a>{' '}
+              over the next 10 years. As coders proliferate, so will the number
+              of areas in which they operate, including CAD.
+            </p>
+          </MarketingPoint>
+        </div>
       </main>
     </Layout>
-  );
+  )
+}
+
+function MarketingPoint({ leadingPoint, title, children }) {
+  return (
+    <div className="mt-24">
+      <div className="text-2xl text-pink-400 font-bold tracking-widest">
+        {leadingPoint}
+      </div>
+      <h3 className="text-indigo-700 text-4xl mt-4">{title}</h3>
+      <div className="text-gray-600 max-w-3xl text-2xl font-light mt-4">
+        {children}
+      </div>
+    </div>
+  )
 }