Step 1: Editing the Heading and Subheading

Locate the following section of code:

<Display className="max-w-[15ch] leading-none pt-8 text-center" as="h1">
  Voluptatum sequi dolorum atque vitae.
</Display>
<Body1 className="max-w-sm pt-4 text-center text-gray-600 md:max-w-md lg:max-w-2xl lg:pt-6">
  Lorem, ipsum dolor sit amet consectetur adipisicing placeat molestiae aspernatur delectus.
</Body1>

• Heading (<h1>):
  Replace Voluptatum sequi dolorum atque vitae. with your desired headline.

• Subheading (<Body1>):
  Replace Lorem, ipsum dolor sit amet consectetur... with a short description about your product or service.

Example Update:

<Display className="max-w-[15ch] leading-none pt-8 text-center" as="h1">
  Build Beautifully, Collaborate Effortlessly
</Display>
<Body1 className="max-w-sm pt-4 text-center text-gray-600 md:max-w-md lg:max-w-2xl lg:pt-6">
  Empower your team with tools designed to make collaboration seamless and effective.
</Body1>

Step 2: Updating Button Text and Links

Find the code for the buttons:

<Button variant="solid" color="neutral" href="/signup">
  Join for free
</Button>
<Button variant="outline" color="neutral" href="/pricing">
  <span className="flex items-center gap-2">
    See our plans
    <div className="rounded-full bg-gray-200 p-1">
      {/* Arrow Right Icon */}
      <svg ... ></svg>
    </div>
  </span>
</Button>

• Update Button Text:
  Replace Join for free or See our plans with your desired button labels (e.g., Get Started or Explore Features).

• Update Links (href):
  Change /signup or /pricing to the appropriate paths in your app.

Example Update:

<Button variant="solid" color="neutral" href="/get-started">
  Get Started
</Button>
<Button variant="outline" color="neutral" href="/features">
  Explore Features
</Button>

Step 3: Customizing Logo Stack Images

Updating the Rotating Logo Stack

Locate the logoStackImages array:

const logoStackImages = [
  {
    src: '/images/icons/uber.webp',
    alt: 'Uber Logo',
  },
  {
    src: '/images/icons/loom.webp',
    alt: 'Loom Logo',
  },
  ...
]

• Replace Image Paths (src):
  Update src with the path to your own images. If you're using local files, ensure they are stored in a directory like public/images/icons.

• Update Alt Text (alt):
  Provide a meaningful description for each image. Good alt text improves accessibility and SEO.

Example Update:

const logoStackImages = [
  {
    src: '/images/icons/your-logo-1.webp',
    alt: 'Your Company Logo 1',
  },
  {
    src: '/images/icons/your-logo-2.webp',
    alt: 'Your Company Logo 2',
  },
]

Updating the Static Logo List

Locate the logoImages array:

const logoImages = [
  {
    src: '/images/logos/meta.svg',
    alt: 'Meta Logo',
  },
  ...
]

• Follow the same steps: Update src and alt for each logo.

Step 4: Adding or Removing Logos

• Add a Logo:
  Add a new object to either logoStackImages or logoImages arrays:

• Remove a Logo:
  Delete the object from the array.

Best Practices

1. Ensure Alt Text Accuracy:
   Always provide descriptive alt text for each image. This improves accessibility and allows screen readers to describe the images to visually impaired users.

2. Optimize Images:
   Compress your images to reduce load time and ensure they are the correct dimensions (e.g., 300px for logos).

3. Preview Your Changes:
   Run your app locally using npm run dev and ensure your updates appear as expected.

Step 5: Testing Your Changes

1. Run Your Application:
   Use npm run dev or yarn dev to view your changes locally.

2. Verify Responsiveness:
   Resize your browser to check that the component looks good on mobile, tablet, and desktop screens.

3. Check Animation Timing:
   Confirm that the logo stack cycles smoothly every 3 seconds (or adjust the timing by modifying the interval duration in the useEffect).

By following this guide, you can easily customize the HeroComponentTwo component to fit your branding and design needs.