issues-103 Add landing page copy

Trying to "sell" the website and the concept of code-cad

.vscode/settings.json

@@ -21,6 +21,9 @@
     "Uploader",
     "describedby",
     "initialise",
-    "redwoodjs"
+    "redwoodjs",
+    "resizer",
+    "roboto",
+    "ropa"
   ]
 }

web/src/components/LandingSection/LandingSection.js

@@ -0,0 +1,174 @@
+import {
+  topLeftFrame,
+  bottomRightFrame,
+  resizer,
+  abstractCode,
+  involuteDonut,
+} from './mockEditorParts'
+import Svg from 'src/components/Svg'
+import { Link } from '@redwoodjs/router'
+import { useAuth } from '@redwoodjs/auth'
+
+const LandingSection = () => {
+  const { logIn, isAuthenticated } = useAuth()
+  return (
+    <div className="mt-16">
+      <div className="relative p-4 shadow-md">
+        <div className="absolute inset-0 bg-gradient-to-bl from-pink-200 via-pink-200 to-red-400 landing-bg-clip-path" />
+        <div className="max-w-6xl px-2 mx-auto font-roboto">
+          <div className="relative">
+            <div className="bg-pink-200 rounded-tr-2xl absolute top-0 right-0 h-24 w-32 hidden lg:block" />
+            <div className="bg-pink-300 rounded-tr-2xl absolute bottom-0 right-0 h-24 w-32 mr-8 hidden lg:block" />
+            <div className="inline-block relative z-10">
+              <div className="flex-col flex">
+                <div className="text-indigo-600 pb-3 tracking-widest">
+                  Here's a thought,
+                </div>
+                <h1 className="font-bold text-indigo-800 text-5xl inline-block tracking-wider">
+                  <span className="text-6xl">C</span>
+                  ode is the future of <span className="text-6xl">C</span>
+                  AD
+                </h1>
+                <div className="text-indigo-600 text-base font-normal self-end pt-3 tracking-widest">
+                  No more click-n-drool.
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-11 grid-rows-5 grid-flow-row-dense grid-flow-col-dense mt-32">
+            <div className=" col-start-1 col-span-5 row-start-1 row-span-3">
+              {topLeftFrame}
+            </div>
+            <div className="col-start-2 col-span-4 row-start-2 row-span-4 pt-8 animate-bounce-sm-slow">
+              {abstractCode}
+            </div>
+            <div className="col-end-11 col-span-4 row-end-5 row-span-5 pt-12">
+              {involuteDonut}
+            </div>
+            <div className="col-start-5 col-span-2 row-start-2 row-span-4">
+              {resizer}
+            </div>
+            <div className="col-end-12 row-end-7 col-span-4 row-span-3">
+              {bottomRightFrame}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="max-w-6xl mx-auto px-2">
+        <h2 className="text-indigo-700 text-5xl font-roboto my-16 tracking-widest font-light">
+          What's the potential of code-cad?
+        </h2>
+        <MarketingPoint
+          leadingPoint="Communication"
+          title="Tech-drawing and CAD as communication medium."
+        >
+          <p>
+            Have you ever started frantically reaching for a pen when trying to
+            explain an idea?
+          </p>
+          <p>
+            Engineers love drawings and CAD extends that. Only now communicating
+            with machines is just as important as with colleagues, and 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 FEM or regenerate tool paths with a CI/CD process</li>
+              <li>Auto-generate a BOM</li>
+              <li>Integrate it into your PLM tools</li>
+            </ul>
+          </div>
+        </div>
+        <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{' '}
+            <Link
+              className="text-gray-500 font-medium"
+              to="https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm"
+            >
+              ranks by 22%
+            </Link>{' '}
+            over the next 10 years. As coders proliferate, so will the number of
+            areas in which they operate, including CAD.
+          </p>
+        </MarketingPoint>
+      </div>
+      <div className="w-3/4 mx-auto h-px bg-pink-400 mt-32" />
+      <div className="mt-24">
+        <p className="text-center text-pink-400 max-w-xl text-2xl mx-auto font-medium">
+          CadHub is a space to share cad projects and it’s our gift to the
+          code-cad community. Let’s celebrate and promote code-cad together.
+        </p>
+        <div className="rounded-md shadow-md max-w-lg mx-auto border border-gray-300 mt-16">
+          <p className="text-2xl font-medium text-gray-600 p-8">
+            Projects use the excellent{' '}
+            <Link
+              className="text-gray-600 underline"
+              to="https://github.com/zalo/CascadeStudio"
+            >
+              CascadeStudio
+            </Link>{' '}
+            with more integrations coming soon.
+          </p>
+          <button
+            className="font-bold text-2xl bg-texture bg-purple-800 text-center w-full py-6 rounded-b-md border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl"
+            onClick={logIn}
+          >
+            <span className="text-indigo-200">Start Hacking Now</span>
+          </button>
+        </div>
+      </div>
+      <div className="flex justify-center mt-64 pt-20 mb-20">
+        <div className="flex text-2xl text-gray-500">
+          See what other's have created
+          <Svg
+            name="arrow-down"
+            className="h-12 w-12 animate-bounce text-indigo-300 ml-2"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LandingSection
+
+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>
+  )
+}

web/src/components/LandingSection/LandingSection.stories.js

@@ -0,0 +1,7 @@
+import LandingSection from './LandingSection'
+
+export const generated = () => {
+  return <LandingSection />
+}
+
+export default { title: 'Components/LandingSection' }

web/src/components/LandingSection/LandingSection.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import LandingSection from './LandingSection'
+
+describe('LandingSection', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<LandingSection />)
+    }).not.toThrow()
+  })
+})

web/src/components/Svg/Svg.js

@@ -1,5 +1,20 @@
 const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
   const svgs = {
+    'arrow-down': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M19 14l-7 7m0 0l-7-7m7 7V3"
+        />
+      </svg>
+    ),
     'arrow-left': (
       <svg
         xmlns="http://www.w3.org/2000/svg"

web/src/index.css

@@ -44,6 +44,30 @@
   @apply list-disc;
 }
 
+
+/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
+.svg-shadow {
+  filter: drop-shadow(0 15px 10px #00000036) drop-shadow(0 4px 6px #00000036);
+}
+
+/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
+.landing-bg-clip-path {
+  clip-path: polygon(0 0, 100% 62%, 100% 100%, 0% 100%);
+}
+
+/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
+@media only screen and (max-width: 1600px) {
+  .landing-bg-clip-path {
+    clip-path: polygon(0 10%, 100% 55%, 100% 100%, 0% 100%);
+  }
+}
+/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
+@media only screen and (max-width: 800px) {
+  .landing-bg-clip-path {
+    clip-path: polygon(0 12%, 100% 70%, 100% 100%, 0% 100%);
+  }
+}
+
 .material-ui-overrides,.MuiPopover-paper {
   /* stop pop over from scrolling */
   overflow: visible !important;

web/src/layouts/MainLayout/MainLayout.js

@@ -127,21 +127,21 @@ const MainLayout = ({ children }) => {
               </li>
             )}
           </ul>
-          <Popover
-            id={popoverId}
-            open={isOpen}
-            anchorEl={anchorEl}
-            onClose={closePopover}
-            anchorOrigin={{
-              vertical: 'bottom',
-              horizontal: 'right',
-            }}
-            transformOrigin={{
-              vertical: 'top',
-              horizontal: 'right',
-            }}
-          >
-            {isAuthenticated && currentUser ? (
+          {isAuthenticated && currentUser && (
+            <Popover
+              id={popoverId}
+              open={isOpen}
+              anchorEl={anchorEl}
+              onClose={closePopover}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+            >
               <div className="p-4 w-40">
                 <Link to={routes.user2({ userName: data?.user?.userName })}>
                   <h3 className="text-indigo-800" style={{ fontWeight: '500' }}>
@@ -157,18 +157,8 @@ const MainLayout = ({ children }) => {
                   Logout
                 </a>
               </div>
-            ) : (
-              <div style={{ padding: '1em', width: '15em' }}>
-                <a
-                  href="#"
-                  className="text-indigo-800 text-indigo-800"
-                  onClick={logIn}
-                >
-                  LOGIN/SIGNUP
-                </a>
-              </div>
-            )}
-          </Popover>
+            </Popover>
+          )}
         </nav>
       </header>
       <Flash timeout={1000} />

web/src/pages/PartsPage/PartsPage.js

@@ -1,12 +1,13 @@
 import MainLayout from 'src/layouts/MainLayout'
 import PartsCell from 'src/components/PartsCell'
+import LandingSection from 'src/components/LandingSection'
 import Seo from 'src/components/Seo/Seo'
 
 const PartsPage = () => {
   return (
     <MainLayout>
       <Seo title="Parts page" description="Cadhub parts page" lang="en-US" />
-
+      <LandingSection />
       <PartsCell />
     </MainLayout>
   )

web/tailwind.config.js

@@ -3,31 +3,58 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true,
     defaultLineHeights: true,
-    standardFontWeights: true
+    standardFontWeights: true,
   },
   purge: [],
   theme: {
     extend: {
+      backgroundImage: () => ({
+        texture: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%236a49c3' fill-opacity='0.47' fill-rule='evenodd'/%3E%3C/svg%3E");`,
+      }),
+      animation: {
+        'bounce-sm-slow': 'bounce-sm 5s linear infinite',
+        'twist-sm-slow': 'twist-sm 10s infinite',
+      },
+      keyframes: {
+        'bounce-sm': {
+          '0%, 100%': {
+            transform: 'translateY(-3%)',
+            animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
+          },
+          '50%': {
+            transform: 'translateY(0)',
+            animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+          },
+        },
+        'twist-sm': {
+          '0%, 100%': {
+            transform: 'rotateY(4deg)',
+          },
+          '50%': {
+            transform: 'perspective(100px)',
+          },
+        },
+      },
       maxWidth: {
         '7xl': '80rem',
         '8xl': '96rem',
         '9xl': '110rem',
       },
       minHeight: {
-        'md': '28rem'
+        md: '28rem',
       },
       fontFamily: {
         'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'],
-        'roboto': ['Roboto', 'Arial', 'sans-serif'],
+        roboto: ['Roboto', 'Arial', 'sans-serif'],
       },
       skew: {
-        '-20': "-20deg"
+        '-20': '-20deg',
       },
       borderRadius: {
         half: '50%',
-      }
-    }
+      },
+    },
   },
   variants: {},
-  plugins: []
+  plugins: [],
 }