@openwarelabs/blocks 0.0.0-stage → 0.6.0

package/dist/styles.css

@@ -0,0 +1,569 @@
+/* @openwarelabs/blocks: import after @openwarelabs/ui/styles.css. */
+/* heroes/Hero01/Hero01.css */
+.ow-hero01,
+.ow-hero01 *,
+.ow-hero01 *::before,
+.ow-hero01 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero01 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 112px var(--ow-page-gutter) 0;
+}
+
+.ow-hero01__inner {
+    display: flex;
+    max-width: 880px;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.ow-hero01__title {
+    margin-top: 24px;
+}
+
+.ow-hero01__lead {
+    margin-top: 22px;
+}
+
+.ow-hero01__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--ow-space-lg);
+    margin-top: 34px;
+}
+
+.ow-hero01__note {
+    margin-top: 16px;
+}
+
+/* The product, cropped at the bottom so it runs on into the page. */
+
+.ow-hero01__visual {
+    max-width: 1080px;
+    margin: 72px auto 0;
+    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
+    mask-image: linear-gradient(to bottom, #000 70%, transparent);
+}
+
+@media (max-width: 760px) {
+    .ow-hero01 {
+        padding-top: 72px;
+    }
+    .ow-hero01__actions {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .ow-hero01__visual {
+        margin-top: 48px;
+    }
+}
+
+/* heroes/Hero02/Hero02.css */
+.ow-hero02,
+.ow-hero02 *,
+.ow-hero02 *::before,
+.ow-hero02 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero02 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 112px 32px 120px;
+    color: var(--ow-text);
+}
+
+.ow-hero02__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+    align-items: center;
+    gap: 72px;
+    margin: 0 auto;
+}
+
+.ow-hero02__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.ow-hero02__title {
+    margin-top: 24px;
+}
+
+.ow-hero02__lead {
+    max-width: 500px;
+    margin-top: 22px;
+}
+
+.ow-hero02__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-lg);
+    margin-top: 34px;
+}
+
+.ow-hero02__points {
+    display: grid;
+    gap: 8px;
+    margin: 32px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-hero02__point {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+}
+
+.ow-hero02__points svg {
+    color: var(--ow-primary-text);
+}
+
+@media (max-width: 960px) {
+    .ow-hero02 {
+        padding-top: 88px;
+    }
+    .ow-hero02__inner {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 56px;
+    }
+    .ow-hero02__lead {
+        max-width: 580px;
+    }
+    .ow-hero02__points {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 22px;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero02 {
+        padding: 72px var(--ow-page-gutter) 80px;
+    }
+    .ow-hero02__inner {
+        gap: 48px;
+    }
+    .ow-hero02__actions {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .ow-hero02__points {
+        display: grid;
+    }
+}
+
+/* heroes/Hero03/Hero03.css */
+.ow-hero03,
+.ow-hero03 *,
+.ow-hero03 *::before,
+.ow-hero03 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero03 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 120px var(--ow-page-gutter) 112px;
+    color: var(--ow-text);
+}
+
+.ow-hero03__inner {
+    display: flex;
+    max-width: 760px;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.ow-hero03__title {
+    margin-top: 24px;
+}
+
+.ow-hero03__lead {
+    margin-top: 22px;
+}
+
+/* The form: a pill-shaped field and its button on one line. */
+
+.ow-hero03__form {
+    width: 100%;
+    max-width: 480px;
+    margin-top: 36px;
+}
+
+.ow-hero03__row {
+    display: flex;
+    gap: var(--ow-space-sm);
+}
+
+.ow-hero03 .ow-hero03__input {
+    height: 46px;
+    flex: 1;
+    border-radius: var(--ow-radius-pill);
+    padding-left: 18px;
+    box-shadow: var(--ow-shadow-control);
+    font-size: 15px;
+}
+
+.ow-hero03__error {
+    margin: 10px 0 0 18px;
+    text-align: left;
+}
+
+.ow-hero03__note {
+    margin-top: 14px;
+}
+
+/* What's left in place of the form once someone has joined. */
+
+.ow-hero03__done {
+    display: flex;
+    width: 100%;
+    max-width: 480px;
+    align-items: center;
+    gap: 12px;
+    margin-top: 36px;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+    background: var(--ow-surface);
+    padding: 14px 14px 14px 16px;
+    text-align: left;
+    animation: ow-hero03-in var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+.ow-hero03__done-icon {
+    display: inline-flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--ow-success-surface);
+    color: var(--ow-success-text);
+}
+
+.ow-hero03__done-text {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: 2px;
+}
+
+.ow-hero03__done-detail {
+    overflow-wrap: anywhere;
+}
+
+@keyframes ow-hero03-in {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero03 {
+        padding: 72px var(--ow-page-gutter) 80px;
+    }
+    .ow-hero03__row {
+        flex-direction: column;
+    }
+    .ow-hero03 .ow-hero03__input {
+        flex: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-hero03__done {
+        animation: none;
+    }
+}
+
+/* heroes/Hero04/Hero04.css */
+.ow-hero04,
+.ow-hero04 *,
+.ow-hero04 *::before,
+.ow-hero04 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero04 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    color: var(--ow-text);
+}
+
+.ow-hero04__grid {
+    padding: 128px 32px 136px;
+}
+
+/* The headline in the middle column; the sample work sits either side of it on wide screens. */
+
+.ow-hero04__layout {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);
+    align-items: center;
+    gap: 40px;
+    margin: 0 auto;
+}
+
+.ow-hero04__text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ow-hero04__title {
+    margin-top: 24px;
+}
+
+.ow-hero04__lead {
+    margin-top: 22px;
+}
+
+.ow-hero04__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--ow-space-lg);
+    margin-top: 34px;
+}
+
+@media (max-width: 1180px) {
+    .ow-hero04__layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero04__grid {
+        padding: 80px var(--ow-page-gutter) 88px;
+    }
+    .ow-hero04__actions {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+/* heroes/Hero05/Hero05.css */
+.ow-hero05,
+.ow-hero05 *,
+.ow-hero05 *::before,
+.ow-hero05 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero05 {
+    background: var(--ow-paper);
+    padding: 128px 32px 88px;
+    color: var(--ow-text);
+}
+
+.ow-hero05__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+/* The headline on the left, the lead and the buttons on the right, sharing a baseline at the bottom. */
+
+.ow-hero05__top {
+    display: grid;
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    align-items: end;
+    gap: 64px;
+}
+
+.ow-hero05__heading {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.ow-hero05__title {
+    margin-top: 24px;
+}
+
+.ow-hero05__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-lg);
+    margin-top: 28px;
+}
+
+/* The first proof: who already uses it. */
+
+.ow-hero05__proof {
+    margin-top: 104px;
+    border-top: 1px solid var(--ow-border);
+    padding-top: 36px;
+}
+
+.ow-hero05__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 28px 40px;
+    margin: 28px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Each logo sits on its own, as tall as it is, so a row of them lines up on its centres. */
+.ow-hero05__logo {
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 1024px) {
+    .ow-hero05 {
+        padding-top: 104px;
+    }
+    .ow-hero05__top {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 28px;
+    }
+    .ow-hero05__list {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        justify-items: start;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero05 {
+        padding: 72px var(--ow-page-gutter) 64px;
+    }
+    .ow-hero05__actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .ow-hero05__proof {
+        margin-top: 64px;
+        padding-top: 28px;
+    }
+    .ow-hero05__list {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 28px 16px;
+    }
+}
+
+/* heroes/Hero06/Hero06.css */
+.ow-hero06,
+.ow-hero06 *,
+.ow-hero06 *::before,
+.ow-hero06 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero06 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 112px 32px 120px;
+    color: var(--ow-text);
+}
+
+.ow-hero06__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+    align-items: center;
+    gap: 72px;
+    margin: 0 auto;
+}
+
+.ow-hero06__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.ow-hero06__title {
+    margin-top: 24px;
+}
+
+.ow-hero06__lead {
+    max-width: 480px;
+    margin-top: 22px;
+}
+
+.ow-hero06__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-sm);
+    margin-top: 34px;
+}
+
+.ow-hero06__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 14px;
+    margin-top: 18px;
+}
+
+.ow-hero06__meta > span + span::before {
+    content: "";
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    margin-right: 14px;
+    border-radius: 50%;
+    background: var(--ow-border-strong);
+    vertical-align: middle;
+}
+
+@media (max-width: 960px) {
+    .ow-hero06 {
+        padding-top: 88px;
+    }
+    .ow-hero06__inner {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 48px;
+    }
+    .ow-hero06__lead {
+        max-width: 560px;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero06 {
+        padding: 72px var(--ow-page-gutter) 80px;
+    }
+    .ow-hero06__buttons {
+        width: 100%;
+    }
+    .ow-hero06__buttons > :first-child {
+        width: 100%;
+    }
+    .ow-hero06__buttons > :not(:first-child) {
+        flex: 1;
+    }
+    .ow-hero06__meta {
+        gap: 6px 12px;
+    }
+    .ow-hero06__meta > span + span::before {
+        margin-right: 12px;
+    }
+    .ow-hero06__meta > .ow-hero06__other {
+        flex-basis: 100%;
+    }
+    .ow-hero06__meta > .ow-hero06__other::before {
+        display: none;
+    }
+}

package/package.json

@@ -1,6 +1,57 @@
 {
-  "name": "@openwarelabs/blocks",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@openwarelabs/blocks",
+    "version": "0.6.0",
+    "description": "Openware UI blocks: whole page sections (heroes and more) as React components that take their content as props.",
+    "license": "MIT",
+    "author": "Alexander Silver",
+    "homepage": "https://github.com/openwarelabs/ui/tree/main/blocks#readme",
+    "bugs": {
+        "url": "https://github.com/openwarelabs/ui/issues"
+    },
+    "type": "module",
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "require": {
+                "types": "./dist/index.d.cts",
+                "default": "./dist/index.cjs"
+            }
+        },
+        "./styles.css": "./dist/styles.css",
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "peerDependencies": {
+        "@openwarelabs/ui": "^0.6.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/openwarelabs/ui.git",
+        "directory": "blocks"
+    },
+    "keywords": [
+        "react",
+        "components",
+        "blocks",
+        "hero",
+        "landing-page",
+        "openware-ui"
+    ]
+}