Hero Section 04

Hero Sections

Hero Section 04

This tutorial explains how to edit the HeroComponentFour component to suit your needs. You'll learn how to:

Update text content (heading, body, and buttons).
Modify button links and styles.
Replace or add image assets in the scrolling carousel.
Understand and adjust animation timing for smoother transitions.
Follow best practices for responsive and accessible design.

Project Resources

Tailwindcss

Framer Motion

Component Locked - Upgrade to a plan

Tutorial

Step 1: Editing Text Content

Locate the main text elements in the component:

Heading

<Display className="max-w-[15ch] leading-none text-center md:text-left" as="h1">
  Voluptatum sequi dolorum atque vitae.
</Display>

Edit: Replace the placeholder text with your headline.

Example Update:

<Display className="max-w-[15ch] leading-none text-center md:text-left" as="h1">
  Experience Innovation Like Never Before
</Display>

Body Text

<Body1 className="max-w-sm pt-4 md:text-gray-600 md:max-w-md lg:max-w-2xl lg:pt-6 text-center md:text-left">
  Lorem, ipsum dolor sit amet consectetur adipisicing placeat molestiae aspernatur delectus.
</Body1>

Edit: Replace the placeholder with a concise description or call to action.

Example Update:

<Body1 className="max-w-sm pt-4 md:text-gray-600 md:max-w-md lg:max-w-2xl lg:pt-6 text-center md:text-left">
  Empower your team with cutting-edge tools designed for productivity and creativity.
</Body1>

Step 2: Updating Buttons

Locate the buttons within the Call to Action Buttons section:

Desktop Buttons

<Button variant="solid" color="neutral" href="/signup" className="hidden sm:flex">
  Join for free
</Button>
<Button variant="outline" color="neutral" href="/pricing" className="hidden sm:flex">
  See our plans
</Button>

Edit Button Text: Replace "Join for free" and "See our plans" with your desired labels.
Edit Links (href): Update /signup and /pricing to the appropriate URLs for your app.

Example Update:

<Button variant="solid" color="neutral" href="/start" className="hidden sm:flex">
  Get Started
</Button>
<Button variant="outline" color="neutral" href="/features" className="hidden sm:flex">
  Learn More
</Button>

Mobile Buttons

<Button variant="solid" color="light" href="/signup" className="sm:hidden">
  Join for free
</Button>
<Button variant="outline" color="light" href="/pricing" className="sm:hidden">
  See our plans
</Button>

Follow the same steps to update text and links.

Step 3: Replacing or Adding Images

Carousel Image List

The scrolling images are defined in the imageList array:

const imageList = [
  { src: "/Mobile_1.webp", alt: "screen 1" },
  { src: "/Mobile_2.webp", alt: "screen 2" },
  ...
]

Replace src: Update the image paths with your own. If using local images, save them in the public folder (e.g., public/images/).
Update alt: Provide meaningful descriptions for each image for accessibility and SEO.

Example Update:

const imageList = [
  { src: "/images/custom_image1.webp", alt: "Custom Screen 1" },
  { src: "/images/custom_image2.webp", alt: "Custom Screen 2" },
]

Adding More Images

Add additional objects to the array following the same structure:

Removing Images

Delete objects you no longer need from the array.

Step 4: Adjusting Animation Timing

The animations for the image carousel are controlled in the motion.div elements:

<motion.div
  className="flex flex-col gap-4"
  initial={{ y: colIndex % 2 === 0 ? 0 : "-25%" }}
  animate={{ y: colIndex % 2 === 0 ? "-25%" : 0 }}
  transition={{
    duration: 250,
    repeat: Infinity,
    ease: "linear",
  }}
>

Adjust Speed (duration): Lower values make the animation faster, while higher values slow it down.
Easing: Modify the easing function (ease) to experiment with different animation styles (e.g., easeIn, easeOut).

Example Update: