`HeroCallToAction` component

Objectives

In this tutorial, you will:

explore the characteristics and purpose of a landing page hero section
learn how to import, understand and use a pre-built React component in your website.
identify props in React, and describe how they are used to pass data into a component.

Hero sections

Hero sections are the first thing you see when you visit a website.

But what exactly is their purpose, and what makes a ‘good’ one?

Look carefully at the two hero sections below (clicking each will make it larger):

With the person next to you, prepare responses to the following questions:

What do you feel are the most eye-catching elements of these hero sections?

Aim for around three.
In your own words, complete the following sentence: “The purpose of a hero section is to…”.

When you are ready, compare your responses with those below:

1. Eye-catching elements

the image. It should say something about the content and tone of the page.
the text header(s) (with the most important text being the largest)
the button(s) that encourage users to take the next step. (These are known as call to action buttons (CTAs))

2. Purpose

The purpose of a hero section is to entice users to take the next key step, like sign up for an account, buy a product or simply explore the rest of the page.

Hero Section Analysis

Importing a component

There are two main hero components included with the Epic News starter project 🎉🎉

In this first guide, we will look at the HeroCallToAction component.

Hero Call To Action Image Right

The HeroCallToAction component provides a handy template for displaying a hero section on your site.

Unfortunately, the code for this lives in app/components/organisms/Hero/HeroCallToAction.tsx, which is a completely different file to the one we have been working on at app/root.tsx!

So how can we use it? 🤔

Importing a React component

Most applications are built up from many small components. We can import these components from one file into another using the import statement.

Import statements are always placed at the top of a file:

1
import { RiTwitterXFill, RiLinkedinBoxFill } from 'react-icons/ri'
2
import { useLoaderData } from 'react-router'
3
import { type Route } from './+types/root.ts'
4
import { type loader } from './__root.server.tsx'
5
// ...

Look carefully at the syntax for importing a React component from a file:

import ComponentName from '~/path/to/component'

The ~/ symbol is called a tilde, and is a shortcut for the app/ directory. Take a moment to locate this on your keyboard. It is usually found either:

above the Tab key
next to the lower left Shift
immediately to the left of the Enter key

Imagine I had a component called ‘Button.tsx’ inside the app/components folder:

Directoryapp
- Directorycomponents
  - Button.tsx

Using the ~/ shortcut, I would import it like this:

import Button from '~/components/Button.tsx'

Now imagine I moved ‘Button.tsx’ into a new subfolder called ui inside app/components:

Directoryapp
- Directorycomponents
  - Directoryui
    Button.tsx

Now, I would import it like this:

import Button from '~/components/ui/Button.tsx'

Challenge

The HeroCallToAction component is found at app/components/organisms/Hero/HeroCallToAction.tsx.

Hero Call To Action Component File Location

With this knowledge, work as pair programmers to write the import statement that makes the HeroCallToAction component available inside app/root.tsx:


10 collapsed lines
1
import { RiTwitterXFill, RiLinkedinBoxFill } from 'react-icons/ri'
2
import { useLoaderData } from 'react-router'
3
import { type Route } from './+types/root.ts'
4
import { type loader } from './__root.server.tsx'
5
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
6
import FooterLogoCentre from './components/organisms/Footer/FooterLogoCentre.tsx'
7
import HeaderWithSearch from './components/organisms/HeaderWithSearch/index.tsx'
8
import Document from './components/shared-layout/Document.tsx'
9
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
10
import { useNonce } from './utils/nonce-provider.ts'
11
import rootLinkElements from './utils/providers/rootLinkElements.ts'
12
import headshot from '~/assets/jpg/portrait-01.jpg'
13
import headshot2 from '~/assets/jpg/portrait-02.jpg'
14
import headshot3 from '~/assets/jpg/portrait-03.jpg'
15
// ... Add your import statement here...

Solution

Open app/root.tsx

Add the following to the end of your import list:

10 collapsed lines
import { RiTwitterXFill, RiLinkedinBoxFill } from 'react-icons/ri'
import { useLoaderData } from 'react-router'
import { type Route } from './+types/root.ts'
import { type loader } from './__root.server.tsx'
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
import FooterLogoCentre from './components/organisms/Footer/FooterLogoCentre.tsx'
import HeaderWithSearch from './components/organisms/HeaderWithSearch/index.tsx'
import Document from './components/shared-layout/Document.tsx'
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
import { useNonce } from './utils/nonce-provider.ts'
import rootLinkElements from './utils/providers/rootLinkElements.ts'
import headshot from '~/assets/jpg/portrait-01.jpg'
import headshot2 from '~/assets/jpg/portrait-02.jpg'
import headshot3 from '~/assets/jpg/portrait-03.jpg'
import HeroCallToAction from '~/components/organisms/Hero/HeroCallToAction.tsx'

Import HeroCallToAction

Displaying the component

Now we’ve imported the component, we can display it just below the main page heading.

Find the opening <h1> tag in the app/root.tsx file, somewhere around line 62:


49 collapsed lines
1
import { RiTwitterXFill, RiLinkedinBoxFill } from 'react-icons/ri'
2
import { useLoaderData } from 'react-router'
3
import { type Route } from './+types/root.ts'
4
import { type loader } from './__root.server.tsx'
5
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
6
import FooterLogoCentre from './components/organisms/Footer/FooterLogoCentre.tsx'
7
import HeaderWithSearch from './components/organisms/HeaderWithSearch/index.tsx'
8
import Document from './components/shared-layout/Document.tsx'
9
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
10
import { useNonce } from './utils/nonce-provider.ts'
11
import rootLinkElements from './utils/providers/rootLinkElements.ts'
12
import headshot from '~/assets/jpg/portrait-01.jpg'
13
import headshot2 from '~/assets/jpg/portrait-02.jpg'
14
import headshot3 from '~/assets/jpg/portrait-03.jpg'
15
import HeroCallToAction from '~/components/organisms/Hero/HeroCallToAction.tsx'
16

17
export const links: Route.LinksFunction = () => {
18
  return rootLinkElements
19
}
20
export { meta } from './__root.client.tsx'
21
export { headers, loader } from './__root.server.tsx'
22

23
interface TeamMemberCardProps {
24
  name: string
25
  role: string
26
  imageSrc: string
27
}
28

29
export function TeamMemberCard({ name, role, imageSrc }: TeamMemberCardProps) {
30
  return (
31
    <div className="w-fit rounded-lg bg-slate-800 p-8">
32
      <img
33
        src={imageSrc}
34
        alt="An employee"
35
        className="mx-auto h-64 w-64 rounded-full"
36
      />
37

38
      <div className="pt-6">
39
        <h3 className="font-semi-bold text-center text-white">{name}</h3>
40
        <p className="pt-1 text-center text-slate-400">{role}</p>
41

42
        <div className="flex justify-center gap-4 pt-6 text-slate-400">
43
          <RiTwitterXFill />
44
          <RiLinkedinBoxFill />
45
        </div>
46
      </div>
47
    </div>
48
  )
49
}
50

51
export default function App() {
52
  const data = useLoaderData<typeof loader | null>()
53
  const nonce = useNonce()
54
  const theme = useTheme()
55

56
  return (
57
    <Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
58
      <div className="flex h-screen flex-col justify-between">
59
        <div className="flex-1">
60
          <HeaderWithSearch />
61
          <main className="grid h-full place-items-center">
62
            <h1 className="text-mega">Epic News</h1>
63
            <div className="m-4 flex gap-4">
15 collapsed lines
64
              <TeamMemberCard
65
                name="Leonard Krasner"
66
                role="Senior Designer"
67
                imageSrc={headshot}
68
              />
69
              <TeamMemberCard
70
                name="John Smith"
71
                role="Lead Developer"
72
                imageSrc={headshot2}
73
              />
74
              <TeamMemberCard
75
                name="Jane Doe"
76
                role="Marketing Manager"
77
                imageSrc={headshot3}
78
              />
79
            </div>
80
          </main>
81
        </div>
82

83
        <div className="container flex justify-between pb-5">
84
          <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
85
        </div>
86
        <FooterLogoCentre />
87
      </div>
88
    </Document>
89
  )
90
}
91

92
export const ErrorBoundary = GeneralErrorBoundary

Next, slot the HeroCallToAction component just below the h1 tag:


49 collapsed lines
1
import { RiTwitterXFill, RiLinkedinBoxFill } from 'react-icons/ri'
2
import { useLoaderData } from 'react-router'
3
import { type Route } from './+types/root.ts'
4
import { type loader } from './__root.server.tsx'
5
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
6
import FooterLogoCentre from './components/organisms/Footer/FooterLogoCentre.tsx'
7
import HeaderWithSearch from './components/organisms/HeaderWithSearch/index.tsx'
8
import Document from './components/shared-layout/Document.tsx'
9
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
10
import { useNonce } from './utils/nonce-provider.ts'
11
import rootLinkElements from './utils/providers/rootLinkElements.ts'
12
import headshot from '~/assets/jpg/portrait-01.jpg'
13
import headshot2 from '~/assets/jpg/portrait-02.jpg'
14
import headshot3 from '~/assets/jpg/portrait-03.jpg'
15
import HeroCallToAction from '~/components/organisms/Hero/HeroCallToAction.tsx'
16

17
export const links: Route.LinksFunction = () => {
18
  return rootLinkElements
19
}
20
export { meta } from './__root.client.tsx'
21
export { headers, loader } from './__root.server.tsx'
22

23
interface TeamMemberCardProps {
24
  name: string
25
  role: string
26
  imageSrc: string
27
}
28

29
export function TeamMemberCard({ name, role, imageSrc }: TeamMemberCardProps) {
30
  return (
31
    <div className="w-fit rounded-lg bg-slate-800 p-8">
32
      <img
33
        src={imageSrc}
34
        alt="An employee"
35
        className="mx-auto h-64 w-64 rounded-full"
36
      />
37

38
      <div className="pt-6">
39
        <h3 className="font-semi-bold text-center text-white">{name}</h3>
40
        <p className="pt-1 text-center text-slate-400">{role}</p>
41

42
        <div className="flex justify-center gap-4 pt-6 text-slate-400">
43
          <RiTwitterXFill />
44
          <RiLinkedinBoxFill />
45
        </div>
46
      </div>
47
    </div>
48
  )
49
}
50

51
export default function App() {
52
  const data = useLoaderData<typeof loader | null>()
53
  const nonce = useNonce()
54
  const theme = useTheme()
55

56
  return (
57
    <Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
58
      <div className="flex h-screen flex-col justify-between">
59
        <div className="flex-1">
60
          <HeaderWithSearch />
61
          <main className="grid h-full place-items-center">
62
            <h1 className="text-mega">Epic News</h1>
63

64
            <div className="w-full py-16">
65
              <HeroCallToAction />
66
            </div>
67

68
            <div className="m-4 flex gap-4">
15 collapsed lines
69
              <TeamMemberCard
70
                name="Leonard Krasner"
71
                role="Senior Designer"
72
                imageSrc={headshot}
73
              />
74
              <TeamMemberCard
75
                name="John Smith"
76
                role="Lead Developer"
77
                imageSrc={headshot2}
78
              />
79
              <TeamMemberCard
80
                name="Jane Doe"
81
                role="Marketing Manager"
82
                imageSrc={headshot3}
83
              />
84
            </div>
85
          </main>
86
        </div>
87

88
        <div className="container flex justify-between pb-5">
89
          <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
90
        </div>
91
        <FooterLogoCentre />
92
      </div>
93
    </Document>
94
  )
95
}
96

97
export const ErrorBoundary = GeneralErrorBoundary

You will notice that the HeroCallToAction component is underlined in red. You can see why by hovering your mouse over it:

HeroCallToAction component missing props

Delete the line shown in red, and add the section of JSX code shown in green below:


49 collapsed lines
1
import { RiTwitterXFill, RiLinkedinBoxFill } from 'react-icons/ri'
2
import { useLoaderData } from 'react-router'
3
import { type Route } from './+types/root.ts'
4
import { type loader } from './__root.server.tsx'
5
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
6
import FooterLogoCentre from './components/organisms/Footer/FooterLogoCentre.tsx'
7
import HeaderWithSearch from './components/organisms/HeaderWithSearch/index.tsx'
8
import Document from './components/shared-layout/Document.tsx'
9
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
10
import { useNonce } from './utils/nonce-provider.ts'
11
import rootLinkElements from './utils/providers/rootLinkElements.ts'
12
import headshot from '~/assets/jpg/portrait-01.jpg'
13
import headshot2 from '~/assets/jpg/portrait-02.jpg'
14
import headshot3 from '~/assets/jpg/portrait-03.jpg'
15
import HeroCallToAction from '~/components/organisms/Hero/HeroCallToAction.tsx'
16

17
export const links: Route.LinksFunction = () => {
18
  return rootLinkElements
19
}
20
export { meta } from './__root.client.tsx'
21
export { headers, loader } from './__root.server.tsx'
22

23
interface TeamMemberCardProps {
24
  name: string
25
  role: string
26
  imageSrc: string
27
}
28

29
export function TeamMemberCard({ name, role, imageSrc }: TeamMemberCardProps) {
30
  return (
31
    <div className="w-fit rounded-lg bg-slate-800 p-8">
32
      <img
33
        src={imageSrc}
34
        alt="An employee"
35
        className="mx-auto h-64 w-64 rounded-full"
36
      />
37

38
      <div className="pt-6">
39
        <h3 className="font-semi-bold text-center text-white">{name}</h3>
40
        <p className="pt-1 text-center text-slate-400">{role}</p>
41

42
        <div className="flex justify-center gap-4 pt-6 text-slate-400">
43
          <RiTwitterXFill />
44
          <RiLinkedinBoxFill />
45
        </div>
46
      </div>
47
    </div>
48
  )
49
}
50

51
export default function App() {
52
  const data = useLoaderData<typeof loader | null>()
53
  const nonce = useNonce()
54
  const theme = useTheme()
55

56
  return (
57
    <Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
58
      <div className="flex h-screen flex-col justify-between">
59
        <div className="flex-1">
60
          <HeaderWithSearch />
61
          <main className="grid h-full place-items-center">
62
            <h1 className="text-mega">Epic News</h1>
63

64
            <HeroCallToAction />
65
            <div className="w-full py-16">
66
              <HeroCallToAction image="https://www.helpguide.org/wp-content/uploads/2020/01/Social-Media-and-Mental-Health.webp">
67
                <div className="flex flex-col gap-8 px-8">
68
                  <h2 className="text-h2">Welcome to Epic News</h2>
69
                  <p className="text-lg">
70
                    Keep up to date with the latest tech news.
71
                  </p>
72
                </div>
73
              </HeroCallToAction>
74
            </div>
75

76
            <div className="m-4 flex gap-4">
15 collapsed lines
77
              <TeamMemberCard
78
                name="Leonard Krasner"
79
                role="Senior Designer"
80
                imageSrc={headshot}
81
              />
82
              <TeamMemberCard
83
                name="John Smith"
84
                role="Lead Developer"
85
                imageSrc={headshot2}
86
              />
87
              <TeamMemberCard
88
                name="Jane Doe"
89
                role="Marketing Manager"
90
                imageSrc={headshot3}
91
              />
92
            </div>
93
          </main>
94
        </div>
95

96
        <div className="container flex justify-between pb-5">
97
          <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
98
        </div>
99
        <FooterLogoCentre />
100
      </div>
101
    </Document>
102
  )
103
}
104

105
export const ErrorBoundary = GeneralErrorBoundary

Save the changes to your file and head back to your browser.

You should now see the HeroCallToAction component displayed correctly on your site:

Understanding the `HeroCallToAction` props

So how can we understand what props are needed by the HeroCallToAction component?

🤔

Open the component file at app/components/organisms/Hero/HeroCallToAction.tsx (if you haven’t already).

Jump to file in VS Code
Section titled “Jump to file in VS Code”
You can jump straight to any project file in VS Code by typing CTRL + P and typing in the start of the filename.
If you copy and paste the full path shared above to the file, it will take you there automatically.

If you look at the code, you will see that it has something called an interface defined at the very top of the file.

This interface describes the props that the component expects to receive.

Let’s take a look:
app/components/organisms/Hero/HeroCallToAction.tsx
```
1
interface HeroCallToActionProps {
2
  image: string
3
  imageRight?: boolean
4
  hasBackgroundColour?: boolean
5
  children: React.ReactNode
6
}
7

8
const HeroCallToAction = ({
26 collapsed lines
9
  children,
10
  image,
11
  imageRight = false,
12
  hasBackgroundColour = false,
13
}: HeroCallToActionProps) => {
14
  return (
15
    <div
16
      className={`md:mx-auto md:flex md:max-w-6xl ${
17
        imageRight && 'md:flex-row-reverse'
18
      }`}
19
    >
20
      <div className="relative flex h-96 items-center justify-center overflow-hidden md:h-[32rem] md:w-1/2">
21
        <img
22
          src={image}
23
          alt="A hero with a call to action."
24
          className="absolute min-h-full min-w-full object-cover object-center"
25
        />
26
      </div>
27
      <div className="relative flex h-96 items-center justify-center md:h-[32rem] md:w-1/2">
28
        {children}
29
      </div>
30
    </div>
31
  )
32
}
33

34
export default HeroCallToAction
```
This tells us that the component has two optional props as well as the essential ones we’ve been using already.

Optional props are those that don’t have to be passed to the component when it is used, but can be if needed.

We can tell which props are optional by the ? symbol after the prop name:
app/components/organisms/Hero/HeroCallToAction.tsx
```
interface HeroCallToActionProps {
  image: string
  imageRight?: boolean
  hasBackgroundColour?: boolean
  children: React.ReactNode
}
```
The imageRight prop is a boolean that determines whether the image should be displayed on the right or left side of the component.

The hasBackgroundColour prop is another boolean, but this one determines whether the component should have a background colour.

Let’s try adding an imageRight prop to the component where we call it in app/root.tsx:

<HeroCallToAction
  image="https://www.helpguide.org/wp-content/uploads/2020/01/Social-Media-and-Mental-Health.webp"
  imageRight={true}
>
  <div className="flex flex-col gap-8 px-8">
    <h2 className="text-h2">Welcome to Epic News</h2>
    <p className="text-lg">
      Keep up to date with the latest tech news.
    </p>
  </div>
</HeroCallToAction>

With this change saved, check your browser again:

Notice how the picture has shifted from the left to the right?

Looking at the interface expected by a component will help you understand what props you need to pass into it.

Challenges

Provide an image to the HeroCallToAction component that is taken from the app/assets/jpg folder instead of the external image we currently have.

Remind yourself how to add to and import an image from the app/assets folder by revisiting the previous tutorial.
Customise the children of the HeroCallToAction component to display your own custom message with styles.
You will notice that the HeroCallToAction component has a hasBackgroundColour prop, but this is not used anywhere inside the component.
- Fix the component so that if hasBackgroundColour is set to true, it should have the background colour class of bg-secondary. If it is false, is should be bg-transparent
- TIP: Look at how similar logic has been implemented with the imageRight prop.

Extra Credit (optional) 🚀🚀

Currently, the HeroCallToAction component has a lot of space around it from the title and horizontal margins.

Hero Call To Action With Space

Can you modify the root.tsx file to:

remove this space and make the component full width?
move the <h1> title at the top of the page so that it becomes part of the HeroCallToAction component instead?

Solutions

When you are ready, reveal the solutions to the challenges.

1. 🖼️ Provide an image from project assets.

Firstly, let’s import an image from our app/assets/jpg folder.

Add the following to the end of your import list at top of app/root.tsx:

8 collapsed lines
import { useLoaderData } from 'react-router'
import { type Route } from './+types/root.ts'
import { type loader } from './__root.server.tsx'
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
import FooterMenuRight from './components/organisms/Footer/FooterMenuRight'
import HeaderWithSearch from './components/organisms/HeaderWithSearch'
import Document from './components/shared-layout/Document.tsx'
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
import { useNonce } from './utils/nonce-provider.ts'
import rootLinkElements from './utils/providers/rootLinkElements.ts'
import HeroCallToAction from './components/organisms/Hero/HeroCallToAction.tsx'
import heroImage from '~/assets/jpg/sample-hero.jpg'

Next, replace the external image URL with the imported image in the HeroCallToAction component call:

<HeroCallToAction
  image="https://www.helpguide.org/wp-content/uploads/2020/01/Social-Media-and-Mental-Health.webp"
  image={heroImage}
  imageRight={true}
  hasBackgroundColour={true}
>
  <div className="flex flex-col gap-8 px-8">
    <h2 className="text-h2">Welcome to Epic News</h2>
    <p className="text-lg">
      Keep up to date with the latest tech news.
    </p>
  </div>
</HeroCallToAction>

When finished, your hero section should now display the image from the app/assets/jpg folder:

Hero call to action with assets image

1. Provide an image

2. 📝 Custom `children`

Remember that children is a special React prop that will render any JSX that passed between the opening and closing tags of a component.

To customise the children of the HeroCallToAction component, you can add your own JSX elements between the opening and closing tags.

Here is an example of how you can customise the children:

<HeroCallToAction
  image={heroImage}
  imageRight={true}
  hasBackgroundColour={true}
>
  <div className="flex h-full flex-1 flex-col justify-between p-16">
    <div className="flex flex-col gap-8">
      <h2 className="text-h2">Welcome to Epic News</h2>
      <p className="text-lg">
        Keep up to date with the latest tech news.
      </p>
    </div>
    <Button asChild variant="default" size="lg">
      <Link to="/signup">Sign up</Link>
    </Button>
  </div>
</HeroCallToAction>

Note that, to get the Button and Link components to render correctly, you will need to import them at the top of the file:

1
import { Link, useLoaderData } from 'react-router'
2
import { type Route } from './+types/root.ts'
3
import { type loader } from './__root.server.tsx'
7 collapsed lines
4
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
5
import FooterMenuRight from './components/organisms/Footer/FooterMenuRight'
6
import HeaderWithSearch from './components/organisms/HeaderWithSearch'
7
import Document from './components/shared-layout/Document.tsx'
8
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
9
import { useNonce } from './utils/nonce-provider.ts'
10
import rootLinkElements from './utils/providers/rootLinkElements.ts'
11
import HeroCallToAction from './components/organisms/Hero/HeroCallToAction.tsx'
12
import heroImage from '~/assets/jpg/sample-hero.jpg'
13
import { Button } from './components/ui/button.tsx'

2. Custom Children

3. 🎨 Custom Background Colour

Firstly, open the file at app/components/organisms/Hero/HeroCallToAction.tsx.

Next, take a close look at the code in the opening div tag of the component:

const HeroCallToAction = ({
  children,
  image,
  imageRight = false,
  hasBackgroundColour = false,
}: HeroCallToActionProps) => {
  return (
    <div
      className={`md:mx-auto md:flex md:max-w-6xl ${
        imageRight && 'md:flex-row-reverse'
      }`}
    >
12 collapsed lines
      <div className="relative flex h-96 items-center justify-center overflow-hidden md:h-[32rem] md:w-1/2">
        <img
          src={image}
          alt="A hero with a call to action."
          className="absolute min-h-full min-w-full object-cover object-center"
        />
      </div>
      <div
        className="relative flex h-96 items-center justify-center md:h-[32rem] md:w-1/2"
      >
        {children}
      </div>
    </div>
  )
}

You’ll notice that the className of this div tag is using a ternary operator to conditionally apply the 'md:flex-row-reverse' class if imageRight is true.

We can apply the same logic to the hasBackgroundColour prop by adding another ternary operator to the className of the div tag wrapping the children prop.

Look carefully where the red highlighted code is located in your file, then replace it with the green highlighted code below:

1
const HeroCallToAction = ({
2
  children,
3
  image,
4
  imageRight = false,
5
  hasBackgroundColour = false,
6
}: HeroCallToActionProps) => {
7
  return (
8
    <div
9
      className={`md:mx-auto md:flex md:max-w-6xl ${
10
        imageRight && 'md:flex-row-reverse'
11
      }`}
12
    >
13
      <div className="relative flex h-96 items-center justify-center overflow-hidden md:h-[32rem] md:w-1/2">
14
        <img
15
          src={image}
16
          alt="A hero with a call to action."
17
          className="absolute min-h-full min-w-full object-cover object-center"
18
        />
19
      </div>
20
      <div
21
        className="relative flex h-96 items-center justify-center md:h-[32rem] md:w-1/2"
22
      >
23
        {children}
24
      </div>
25
      <div
26
        className={`relative flex h-96 items-center justify-center ${hasBackgroundColour ? `bg-secondary` : `bg-transparent`} md:h-[32rem] md:w-1/2`}
27
      >
28
        {children}
29
      </div>
30
    </div>
31
  )
32
}

With this change in place, a background colour will now be shown if we pass hasBackgroundColour={true} to the component in app/root.tsx:

Hero Call To Action Background Colour

3. Background Colour

There are a few changes we need to get the hero full width:

Head back to app/root.tsx.
Remove the <h1> title from the App component, and the parent div wrapping the HeroCallToAction component:

1
export default function App() {
3 collapsed lines
2
  const data = useLoaderData<typeof loader | null>()
3
  const nonce = useNonce()
4
  const theme = useTheme()
5

6
  return (
7
    <Document nonce={nonce} theme={theme} honeyProps={data?.honeyProps}>
8
      <div className="flex h-screen flex-col justify-between">
9
        <HeaderWithSearch />
10

11
        <div className="flex-1">
12
          <main className="grid h-full place-items-center">
13
           <h1 className="text-mega">Welcome to Epic News!</h1>
14

15
            <div className="w-full py-16">
16
              <HeroCallToAction
17
                image={heroImage}
18
                imageRight={true}
19
                hasBackgroundColour={true}
20
              >
21
                <div className="flex flex-col gap-8 px-8">
22
                  <h2 className="text-h2">Welcome to Epic News</h2>
23
                  <p className="text-lg">
24
                    Keep up to date with the latest tech news.
25
                  </p>
26
                </div>
27
              </HeroCallToAction>
28
            </div>
29

4 collapsed lines
30
            <p className="text-base text-gray-600 md:text-lg lg:text-xl">
31
              Welcome to Epic News, where the latest developments in tech
32
              are found.
33
            </p>
34
          </main>
35
        </div>
36

37
        <div className="container flex justify-between pb-5">
38
          <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
39
        </div>
40
      </div>
41
    </Document>
42
  )
43
}

Finally, we need to edit the HeroCallToAction component code a little.

Open app/components/organisms/Hero/HeroCallToAction.tsx if it isn’t already.

Delete the md:max-w-6xl class highlighted in red from the opening div tag. This will remove the maximum width constraint on the component:

1
const HeroCallToAction = ({
2
  children,
3
  image,
4
  imageRight = false,
5
  hasBackgroundColour = false,
6
}: HeroCallToActionProps) => {
7
  return (
8
    <div
9
      className={`md:flex md:max-w-6xl ${
10
        imageRight && 'md:flex-row-reverse'
11
      }`}
12
    >
12 collapsed lines
13
      <div className="relative flex h-96 items-center justify-center overflow-hidden md:h-[32rem] md:w-1/2">
14
        <img
15
          src={image}
16
          alt="A hero with a call to action."
17
          className="absolute min-h-full min-w-full object-cover object-center"
18
        />
19
      </div>
20
      <div
21
        className={`relative flex h-96 items-center justify-center ${hasBackgroundColour ? `bg-secondary` : `bg-transparent`} md:h-[32rem] md:w-1/2`}
22
      >
23
        {children}
24
      </div>
25
    </div>
26
  )
27
}

With these changes in place, you should now have a full-width hero section on your site:

Full Width Hero Call To Action

4. Full Width Hero

Housekeeping

You’ll notice that, as we’ve been adding more imports to the top of app/root.tsx, a few of these have been underlined with yellow squiggly lines.

This is because ESLint wants us to organise our imports in a certain way.

Organise imports

To fix this, hover your mouse over an underlined import and, after a moment, select Quick Fix > Fix all auto-fixable problems from the options that appear:

Fix all auto-fixable problems

VS Code will automatically organise your imports for you, and the yellow underlines will disappear.

Summary

In this step, we have:

Used the HeroCallToAction component to display a hero section on our site.
Explored the HeroCallToAction component’s props and how to pass them to the component.
Customised the HeroCallToAction component by adding our own custom content and styling.

What’s next?

In the next step, we will import and use another custom component - the ParallaxBackground hero component.