diff --git a/website/package.json b/website/package.json index 20febf07..0f62bbda 100644 --- a/website/package.json +++ b/website/package.json @@ -14,9 +14,9 @@ "write-heading-ids": "docusaurus write-heading-ids" }, "dependencies": { - "@docusaurus/core": "2.0.0-beta.7", - "@docusaurus/preset-classic": "2.0.0-beta.7", - "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.7", + "@docusaurus/core": "2.0.0-beta.14", + "@docusaurus/preset-classic": "2.0.0-beta.14", + "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.14", "@mdx-js/react": "^1.6.21", "@svgr/webpack": "^5.5.0", "clsx": "^1.1.1", @@ -39,7 +39,7 @@ ] }, "devDependencies": { - "@docusaurus/module-type-aliases": "^2.0.0-beta.7", + "@docusaurus/module-type-aliases": "^2.0.0-beta.14", "@tsconfig/docusaurus": "^1.0.4", "typescript": "^4.4.4" } diff --git a/website/src/components/Hero/index.tsx b/website/src/components/Hero/index.tsx index 4dd9d7b1..469f972f 100644 --- a/website/src/components/Hero/index.tsx +++ b/website/src/components/Hero/index.tsx @@ -26,10 +26,11 @@ export const Hero = () => {

{siteConfig.title}

-

{siteConfig.tagline}

+

{siteConfig.tagline}

+
Get Started diff --git a/website/src/components/Hero/styles.module.css b/website/src/components/Hero/styles.module.css index 9329c4b3..2472e13a 100644 --- a/website/src/components/Hero/styles.module.css +++ b/website/src/components/Hero/styles.module.css @@ -4,6 +4,7 @@ */ .heroBanner { + background-color: var(--brand-blue); position: relative; z-index: 1; padding: 2rem; @@ -12,6 +13,7 @@ .heroBanner:after { background: inherit; + border-bottom: 10px solid var(--brand-orange); content: ''; display: block; height: 50%; @@ -26,18 +28,18 @@ -webkit-backface-visibility: hidden; } +.heroSubtitle { + font-weight: 500; + margin-bottom: 2rem; +} + @media screen and (min-width: 966px) { .heroBanner { - padding: 2rem 0 4rem; - margin-bottom: 5rem; + padding: 3rem 0 4rem; + margin-bottom: 10rem; } } -.buttons { - display: flex; - align-items: center; -} - .logoBadge { max-width: 8rem; margin-bottom: 0.75rem; @@ -54,3 +56,16 @@ margin-top: 0; } } + +.buttons { + display: flex; + align-items: center; +} + +.buttons .ctaButton { + border-radius: 3px; + border-color: var(--brand-orange); + background-color: var(--brand-orange); + color: white; + padding: 0.75rem 1.75rem; +} diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index 587a372b..62496380 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -6,6 +6,7 @@ import styles from './styles.module.css'; const FeatureList = [ { title: 'Take screenshots from your app', + imageSource: '/images/homepage/mockup.png', description: ( <> Owl was designed make it easy to add visual regression testing to your @@ -15,14 +16,15 @@ const FeatureList = [ }, { title: 'Compare screenshots taken', + Svg: require('../../../static/images/homepage/diff.svg').default, + svgClassName: styles.visualExample, description: ( <>We've created a simple api for capturing and comparing screenshots. ), }, { title: 'View the differences', - Svg: require('../../../static/images/homepage/visual-example.svg').default, - svgClassName: styles.visualExample, + imageSource: '/images/homepage/report.png', description: ( <> Owl clearly highlights all visual differences, so no need to play @@ -33,23 +35,28 @@ const FeatureList = [ ]; export const HomepageFeatures = () => { - return FeatureList.map(({ Svg, svgClassName, title, description }, idx) => { - return ( -
-
-

{title}

-

{description}

+ return FeatureList.map( + ({ Svg, svgClassName, title, description, imageSource }, idx) => { + return ( +
+
+

{title}

+

{description}

-
- {!!Svg && ( - - )} +
+ {!!imageSource && ( + + )} + {!!Svg && ( + + )} +
-
-
- ); - }); +
+ ); + } + ); }; diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index fdce6478..985b32ea 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -1,10 +1,16 @@ .feature { background-color: var(--ifm-color-secondary); - padding: 3rem; + padding: 2rem; margin: 1rem auto; text-align: center; } +@media (min-width: 1416px) { + .feature { + padding: 3rem; + } +} + .featureSvg { width: 100%; max-width: 10rem; @@ -16,3 +22,8 @@ max-width: 35rem; max-height: 15rem; } + +.sectionImageMockup { + max-width: 40rem; + width: 100%; +} diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 7b4eb6bf..d1117249 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,18 +6,13 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: rgb(33, 175, 144); - --ifm-color-primary-darker: rgb(31, 165, 136); - --ifm-color-primary-darkest: rgb(26, 136, 112); - --ifm-color-primary-light: rgb(70, 203, 174); - --ifm-color-primary-lighter: rgb(102, 212, 189); - --ifm-color-primary-lightest: rgb(146, 224, 208); - --ifm-code-font-size: 95%; + --brand-blue: #1e2852; + --brand-orange: #f04d21; --ifm-navbar-height: 4.25rem; --ifm-h3-font-size: 2.2rem; + --ifm-code-font-size: 95%; } html[data-theme='dark'] { @@ -27,8 +22,8 @@ html[data-theme='dark'] { .navbar--dark, .hero--dark, .footer--dark { - --ifm-navbar-background-color: #303846; - --ifm-footer-background-color: #303846; + --ifm-navbar-background-color: var(--brand-blue); + --ifm-footer-background-color: var(--brand-blue); box-shadow: initial; } @@ -55,3 +50,59 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } + +/* Content */ + +.main-wrapper { + max-width: 1400px; + width: 1400px; + align-self: center; +} + +@media (max-width: 1416px) { + .main-wrapper { + max-width: 100%; + width: 100%; + } +} + +.homepage { + width: 100%; + max-width: 100%; +} + +.homepage main { + padding: 0 2rem; +} + +.homepage .intro { + font-size: 1.25rem; +} + +/* Navbar */ + +.navbar .navbar__inner { + max-width: 1360px; + margin: 0 auto; +} + +@media (max-width: 1416px) { + .main-wrapper { + max-width: 100%; + width: 100%; + } +} + +/* Footer */ + +.footer { + margin-top: 3rem; + padding: 2rem; +} + +@media (min-width: 1416px) { + .footer { + margin-top: 5rem; + padding: var(--ifm-footer-padding-horizontal); + } +} diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 3f919e21..a82e1118 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -9,17 +9,19 @@ export default function Home() {
-

- This library enables developers to introduce visual regression tests - to their apps for iOS and Android. - Being heavily inspired by{' '} - Detox, an end-to-end - testing and automation framework, this library uses a similar API that - makes setting up react-native-owl and running the tests locally and on - your preferred CI service, seamless. +

About

+

+ This visual regression testing for React Native library enables + developers to introduce visual regression tests to their apps for{' '} + iOS and Android. Being heavily + inspired by Detox, an + end-to-end testing and automation framework, this library uses a + similar API that makes setting up react-native-owl and running the + tests locally and on your preferred CI service, seamless.

{/* REMOVE INITIALLY AS THIS WILL BE DEPLOYED BEFORE THE BLOG IN PUBLISHED diff --git a/website/src/theme/Footer/index.tsx b/website/src/theme/Footer/index.tsx index ffa041fe..ffd7905a 100644 --- a/website/src/theme/Footer/index.tsx +++ b/website/src/theme/Footer/index.tsx @@ -14,7 +14,9 @@ export default function Footer() { return (