From 5114716ee8f3fc0a11138754f0b9264a7b8f4818 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Sun, 29 Nov 2020 11:05:44 +1100 Subject: [PATCH] issues-103 Add landing page copy Trying to "sell" the website and the concept of code-cad --- .vscode/settings.json | 5 +- .../LandingSection/LandingSection.js | 174 ++++++++++++++++++ .../LandingSection/LandingSection.stories.js | 7 + .../LandingSection/LandingSection.test.js | 11 ++ .../LandingSection/mockEditorParts.js | 114 ++++++++++++ web/src/components/Svg/Svg.js | 15 ++ web/src/index.css | 24 +++ web/src/layouts/MainLayout/MainLayout.js | 44 ++--- web/src/pages/PartsPage/PartsPage.js | 3 +- web/tailwind.config.js | 41 ++++- 10 files changed, 402 insertions(+), 36 deletions(-) create mode 100644 web/src/components/LandingSection/LandingSection.js create mode 100644 web/src/components/LandingSection/LandingSection.stories.js create mode 100644 web/src/components/LandingSection/LandingSection.test.js create mode 100644 web/src/components/LandingSection/mockEditorParts.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 849ad83..7524601 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -21,6 +21,9 @@ "Uploader", "describedby", "initialise", - "redwoodjs" + "redwoodjs", + "resizer", + "roboto", + "ropa" ] } diff --git a/web/src/components/LandingSection/LandingSection.js b/web/src/components/LandingSection/LandingSection.js new file mode 100644 index 0000000..9afd24d --- /dev/null +++ b/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 ( +
+
+
+
+
+
+
+
+
+
+ Here's a thought, +
+

+ C + ode is the future of C + AD +

+
+ No more click-n-drool. +
+
+
+
+ +
+
+ {topLeftFrame} +
+
+ {abstractCode} +
+
+ {involuteDonut} +
+
+ {resizer} +
+
+ {bottomRightFrame} +
+
+
+
+
+

+ What's the potential of code-cad? +

+ +

+ Have you ever started frantically reaching for a pen when trying to + explain an idea? +

+

+ 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. +

+ +
+
+ Extensible +
+

+ If it bleeds it's text, we can{' '} + kill hack it +

+
+
    +
  • Build your own helper functions and abstractions
    • +
  • Trigger FEM or regenerate tool paths with a CI/CD process
    • +
  • Auto-generate a BOM
    • +
  • Integrate it into your PLM tools
    • +
+
+
+ +

+ 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. +

+ + +

+ 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{' '} + + ranks by 22% + {' '} + over the next 10 years. As coders proliferate, so will the number of + areas in which they operate, including CAD. +

+ +
+
+
+

+ 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. +

+
+

+ Projects use the excellent{' '} + + CascadeStudio + {' '} + with more integrations coming soon. +

+ +
+
+
+
+ See what other's have created + +
+
+
+ ) +} + +export default LandingSection + +function MarketingPoint({ leadingPoint, title, children }) { + return ( +
+
+ {leadingPoint} +
+

{title}

+
+ {children} +
+
+ ) +} diff --git a/web/src/components/LandingSection/LandingSection.stories.js b/web/src/components/LandingSection/LandingSection.stories.js new file mode 100644 index 0000000..af041dd --- /dev/null +++ b/web/src/components/LandingSection/LandingSection.stories.js @@ -0,0 +1,7 @@ +import LandingSection from './LandingSection' + +export const generated = () => { + return +} + +export default { title: 'Components/LandingSection' } diff --git a/web/src/components/LandingSection/LandingSection.test.js b/web/src/components/LandingSection/LandingSection.test.js new file mode 100644 index 0000000..b4861f7 --- /dev/null +++ b/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() + }).not.toThrow() + }) +}) diff --git a/web/src/components/LandingSection/mockEditorParts.js b/web/src/components/LandingSection/mockEditorParts.js new file mode 100644 index 0000000..fbf793d --- /dev/null +++ b/web/src/components/LandingSection/mockEditorParts.js @@ -0,0 +1,114 @@ +export const topLeftFrame = ( + + + + +) + +export const bottomRightFrame = ( + + + +) + +export const resizer = ( + + + +) + +export const abstractCode = ( + + + + + + + +) + +export const involuteDonut = ( + + + + + + + + +) diff --git a/web/src/components/Svg/Svg.js b/web/src/components/Svg/Svg.js index 5d50779..9ec0833 100644 --- a/web/src/components/Svg/Svg.js +++ b/web/src/components/Svg/Svg.js @@ -1,5 +1,20 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => { const svgs = { + 'arrow-down': ( + + + + ), 'arrow-left': ( { )} - - {isAuthenticated && currentUser ? ( + {isAuthenticated && currentUser && ( +

@@ -157,18 +157,8 @@ const MainLayout = ({ children }) => { Logout

- ) : ( - - )} - + + )} diff --git a/web/src/pages/PartsPage/PartsPage.js b/web/src/pages/PartsPage/PartsPage.js index 3cf2a10..6d93cbc 100644 --- a/web/src/pages/PartsPage/PartsPage.js +++ b/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 ( - + ) diff --git a/web/tailwind.config.js b/web/tailwind.config.js index c49984b..eeb33ba 100644 --- a/web/tailwind.config.js +++ b/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: [], }