Description:
There is a visible gap appearing between blocks on the button element of the webpage. This unexpected spacing disrupts the visual harmony of the button and affects the overall aesthetics of the design.

Steps to Reproduce:

• Visit the webpage containing the button element.
• Locate the button with multiple blocks or elements inside.
• Observe that there is a noticeable separation between these blocks on the button.

Expected Behavior:
The blocks within the button should be visually aligned without any visible gaps or separations.

Additional Information:

• The issue persists across different screen resolutions and devices.
• It affects the consistency of the design and may lead to confusion for users interacting with the button.

To center the divs inside the initial div using Tailwind CSS, you can add a justify-center to center them vertically.

I was trying to render the cards in the benefit section, but my background image is not being displayed. I tried to copy and paste the code in the original repo as well, but it is still not working. Here is my code :

`import { benefits } from "../constants";
import Heading from "./Heading";
import Section from "./Section";
import Arrow from "../assets/svg/Arrow";
import { GradientLight } from "./design/Benefits";
import ClipPath from "../assets/svg/ClipPath";

const Benefits = () => {
return (

    <div className="flex flex-wrap gap-10 mb-10">
      {benefits.map((item) => (
        <div
          className="block relative p-0.5 bg-no-repeat bg-[length:100%_100%] md:max-w-[24rem]"
          style={{
            backgroundImage: `url(${item.backgroundUrl})`,
          }}
          key={item.id}
        >
          <div className="relative z-2 flex flex-col min-h-[22rem] p-[2.4rem] pointer-events-none">
            <h5 className="h5 mb-5">{item.title}</h5>
            <p className="body-2 mb-6 text-n-3">{item.text}</p>
            <div className="flex items-center mt-auto">
              <img
                src={item.iconUrl}
                width={48}
                height={48}
                alt={item.title}
              />
              <p className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider">
                Explore more
              </p>
              <Arrow />
            </div>
          </div>

          {item.light && <GradientLight />}

          <div
            className="absolute inset-0.5 bg-n-8"
            style={{ clipPath: "url(#benefits)" }}
          >
            <div className="absolute inset-0 opacity-0 transition-opacity hover:opacity-10">
              {item.imageUrl && (
                <img
                  src={item.imageUrl}
                  width={380}
                  height={362}
                  alt={item.title}
                  className="w-full h-full object-cover"
                />
              )}
            </div>
          </div>

          <ClipPath />
        </div>
      ))}
    </div>
  </div>
</Section>

I have been trying to implement this ButtonSvg.jsx - following the tutorial but on a light color scheme. I have change the white prop to black and everywhere it says white to black inside the ButtonSvg.jsx and is still being display as white hamburger.

how can I fix this? When I inspect the code thru dev tools, I am able to change it from white to black and it displays a black hamburger, however, I cannot find where to change it on the code.

Would love to hear a solution for this as I have been looking for a easy to follow tutorial on creating a mobile Nav, and by far, this has been the best one and easy to follow.

Note: Adrian, I am working on rebranding my business page based of your tutorials, picking parts from
one and from another and so on, so far, I'm loving what I am creating based of your excellent tutorials!

I really like this UI, I would love to explore another page designs.

Description:
The footer section of the webpage lacks links to our social media profiles. It's essential to include these links to enhance user engagement and promote our presence on various platforms.

Steps to Reproduce:

1. Navigate to the footer section of the webpage.
2. Look for social media icons or links.
3. Notice that there are no links directing users to our social media accounts.

Expected Behavior:
The footer should contain visible links or icons leading to our official social media profiles, allowing users to easily connect with us on different platforms.

Additional Information:

• Social media presence is crucial for brand visibility and audience interaction.
• Adding social media links to the footer will improve user experience and strengthen our online presence.

Hi Guys,

I'm actually following the video but using an plain create-react-app with typescript ( Nothing should be different though ). For me, the ClipPath functionality is not working correctly as you can check here.

Could you kindly help me out finding out why is not working?

Thanks a lot in advance!

PS: Awesome work!

Kr,
Pedro.

Before

import ButtonSvg from "../assets/svg/ButtonSvg";

const Button = ({ className, href, onClick, children, px, white }) => {
  const classes = `button relative inline-flex items-center justify-center h-11 transition-colors hover:text-color-1 ${
    px || "px-7"
  } ${white ? "text-n-8" : "text-n-1"} ${className || ""}`;
  const spanClasses = "relative z-10";

  const renderButton = () => (
    <button className={classes} onClick={onClick}>
      <span className={spanClasses}>{children}</span>
      {ButtonSvg(white)}
    </button>
  );

  const renderLink = () => (
    <a href={href} className={classes}>
      <span className={spanClasses}>{children}</span>
      {ButtonSvg(white)}
    </a>
  );

  return href ? renderLink() : renderButton();
};

export default Button;

Fix

import ButtonSvg from "../assets/svg/ButtonSvg";

const Button = ({ className, href, onClick, children, px, white }) => {
  const classes = `button relative inline-flex items-center justify-center h-11 transition-colors hover:text-color-1 ${
    px || "px-7"
  } ${white ? "text-n-8" : "text-n-1"} ${className || ""}`;
  const spanClasses = "relative z-10";

  if (href) {
    return (
      <a href={href} className={classes}>
        <span className={spanClasses}>{children}</span>
        {ButtonSvg(white)}
      </a>
    );
  }

  return (
    <button className={classes} onClick={onClick}>
      <span className={spanClasses}>{children}</span>
      {ButtonSvg(white)}
    </button>
  );
};

export default Button;

The gradient "frame" svg images in the Benefits section show nicely on localhost but do not render on Vercel.

import benefitCard1 from "./benefits/card-1.svg";
import benefitCard2 from "./benefits/card-2.svg";
import benefitCard3 from "./benefits/card-3.svg";
import benefitCard4 from "./benefits/card-4.svg";
import benefitCard5 from "./benefits/card-5.svg";
import benefitCard6 from "./benefits/card-6.svg";

Please check it yourself here: https://jsm-brainwave.com/

It is a very strange bug and I cannot figure it out!

It's currently written as href="/pricing" but I'm sure it's meant to be href="#pricing"

Guys, who will reach the end and start making the footer, please note that the li tag is missing in the lesson for the list.

A valid semantic version should have:

<ul>
{socials.map((item) => (
<li key={item.id}>
<a>social link</a>
</li>
))}
</ul>

Hi there, in the readme.md components/index.js file you import from "../../public/assets"; in line 37. However, based on the file structure in the YT Video it should be from "../assets";. This will cause an error in Header.jsx, because the import in the index.js will not find the assets.