feat: changed branding colors of the storefront

packages/adyen-retail-react-app/overrides/app/components/hero/index.jsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+    Box,
+    Flex,
+    Heading,
+    Stack,
+    Image
+} from '@salesforce/retail-react-app/app/components/shared/ui'
+
+const Hero = ({title, img, actions, ...props}) => {
+    const {src, alt} = img
+
+    return (
+        <Box
+            marginBottom={{base: 0, md: 10}}
+            height={{lg: 'xl'}}
+            position={{lg: 'relative'}}
+            {...props}
+        >
+            <Stack
+                align={'center'}
+                spacing={{base: 8, md: 10}}
+                paddingTop={{base: 12, md: 10}}
+                paddingBottom={{base: 6, md: 10}}
+                direction={{base: 'column', lg: 'row'}}
+            >
+                <Stack flex={1} spacing={{base: 5, md: 8}}>
+                    <Heading
+                        as="h1"
+                        color="#0abf53"
+                        fontSize={{base: '4xl', md: '5xl', lg: '6xl'}}
+                        maxWidth={{base: '75%', md: '50%', lg: 'md'}}
+                    >
+                        {title}
+                    </Heading>
+
+                    {actions && <Box width={{base: 'full', lg: 'inherit'}}>{actions}</Box>}
+                </Stack>
+                <Flex
+                    flex={1}
+                    justify={'center'}
+                    align={'center'}
+                    position={'relative'}
+                    width={'full'}
+                    paddingTop={{base: 4, lg: 0}}
+                >
+                    <Box position={'relative'} width={{base: 'full', md: '80%', lg: 'full'}}>
+                        <Image
+                            fit={'cover'}
+                            align={'center'}
+                            width={'100%'}
+                            height={'100%'}
+                            src={src}
+                            alt={alt}
+                        />
+                    </Box>
+                </Flex>
+            </Stack>
+        </Box>
+    )
+}
+
+Hero.displayName = 'Hero'
+
+Hero.propTypes = {
+    /**
+     * Hero component image
+     */
+    img: PropTypes.shape({
+        src: PropTypes.string,
+        alt: PropTypes.string
+    }),
+    /**
+     * Hero component main title
+     */
+    title: PropTypes.string,
+    /**
+     * Call to action component(s)
+     */
+    actions: PropTypes.element
+}
+
+export default Hero

packages/adyen-retail-react-app/overrides/app/pages/home/index.jsx

@@ -24,7 +24,7 @@ import {
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Project Components
-import Hero from '@salesforce/retail-react-app/app/components/hero'
+import Hero from '../../components/hero'
 import Seo from '@salesforce/retail-react-app/app/components/seo'
 import Section from '@salesforce/retail-react-app/app/components/section'
 import ProductScroller from '@salesforce/retail-react-app/app/components/product-scroller'
@@ -85,14 +85,14 @@ const Home = () => {
                     id: 'home.title.react_starter_store'
                 })}
                 img={{
-                    src: getAssetUrl('static/img/hero.png'),
+                    src: getAssetUrl('static/img/sample_checkout_plugins.png'),
                     alt: 'npx pwa-kit-create-app'
                 }}
                 actions={
                     <Stack spacing={{base: 4, sm: 6}} direction={{base: 'column', sm: 'row'}}>
                         <Button
                             as={Link}
-                            href="https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html"
+                            href="https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront/"
                             target="_blank"
                             width={{base: 'full', md: 'inherit'}}
                             paddingX={7}