Hero Section 05

Hero Sections

Hero Section 05

This tutorial walks you through customizing the HeroComponentFive component. You'll learn how to:

Edit text content (headings, body text, and links).
Customize buttons (text, links, and styles).
Replace or update the image.
Adjust animations for a tailored visual experience.

Project Resources

Tailwindcss

Framer Motion

Component Locked - Upgrade to a plan

Tutorial

Step 1: Editing Text Content

Main Heading

Locate the heading in the following code block:

tsxCopy code<Display as="h1" className="leading-none">
  Lorem ipsum dolor<span className="italic font-serif"> elit.</span>
</Display>

Edit Text: Replace Lorem ipsum dolor elit. with your desired headline.
Styling: Keep the <span> for italicized emphasis, or remove it if unnecessary.

Example Update:

tsxCopy code<Display as="h1" className="leading-none">
  Elevate Your Business<span className="italic font-serif"> Today.</span>
</Display>

Body Text

Locate the body text here:

tsxCopy code<Body1>
  Distinctio hic sunt laborum a id vero quas qui nemo{" "}
  <a href="#" className="underline underline-offset-2">
    quos libero
  </a>{" "}
  expedita, harumvoluptatem neque.
</Body1>

Edit Text: Replace the placeholder with a meaningful description.
Link: Update the <a href="#"> with your desired URL.

Example Update:

tsxCopy code<Body1>
  Empower teams to collaborate more effectively with tools built for modern workflows. 
  <a href="/learn-more" className="underline underline-offset-2">
    Learn more
  </a>
  about our features.
</Body1>

Step 2: Customizing Buttons

Button Definitions

The buttons are defined as follows:

tsxCopy code<Button
  href="#"
  variant="solid"
  color="neutral"
>
  Get started
</Button>

<Button href="#" variant="outline" color="neutral">
  Request a demo &rarr;
</Button>

Edit Button Text: Replace "Get started" and "Request a demo" with your desired text.
Update Links (href): Replace "#" with your target URLs.

Example Update:

tsxCopy code<Button
  href="/signup"
  variant="solid"
  color="neutral"
>
  Join Now
</Button>

<Button href="/demo" variant="outline" color="neutral">
  Schedule a Demo &rarr;
</Button>

Button Variants

The variant="solid" button has a filled style, while variant="outline" has a border. Modify them to match your branding.

Step 3: Replacing or Updating the Image

The hero image is defined in this block:

<Image
  className="flex sm:block sm:w-full md:max-w-[1290px]"
  src="/images/UINOW.png"
  alt="Steep app for desktop and mobile"
  width={1290}
  height={1290}
/>

Replace Image Path (src): Update /images/UINOW.png with the path to your image. Save your new image in the public/images/ folder for local files.
Update Alt Text (alt): Write descriptive text for accessibility.

Example Update:

<Image
  className="flex sm:block sm:w-full md:max-w-[1290px]"
  src="/images/your-image.png"
  alt="Powerful tools for collaboration"
  width={1290}
  height={1290}
/>

Image Dimensions

Adjust width and height to match your image dimensions if necessary.

Step 4: Adjusting Animations

The animations are handled using framer-motion. Here's an example:

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6 }}
>

Animation Timing (duration): Change the 0.6 value to control animation speed.
Delays (delay): Add or adjust delay to stagger animations.

Example Update:

<motion.div
  initial={{ opacity: 0, y: -30 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, delay: 0.3 }}
>