Huddle Landing Page

Great work! I've got some feedback.

Vue.js has a neat style guide, that helps with being on the same page when working in team, but is also best practice in general. One example of a 'Strongly Recommended' rule would be 'Single-instance component names'. Components that will only be used once on the page should be prefixed. For example, 'TheHeader' or 'TheFooter'. Maybe you can find some other useful rules in the style guide, like the 'Use multi-word component names'!

Two more apparent things I noticed:

1. You've seen that there are a few buttons on the page looking nearly the same, and created a component. Great! But the component should be more flexible. It's currently called 'ButtonPink' and it's used two times. But there is one more Button on the page! The white on in the upper right corner. That one is hard-coded inside the 'Header.vue'. I think it makes sense to have a single Button component, called something like 'BaseButton' or 'AppButton' (Following the 'Base component names' rule in the style guide). Either it will accept props like 'backgroundColor' and 'textColor', or an even better way is to have a prop called something like 'variant' or 'type' and managing the 'style type' inside the button component. This way, if you want to change all buttons across the page, you only have to change it in one spot! Let yourself be inspired by component libraries like Vuetify or Naive Ui!
2. You are using tailwind colors like 'bg-[#00252e]'. I think a better practice would be to define these colors inside the tailwind.config and use them! This way the names a more descriptive.

A tiny, small thing I noticed is the hover state of the social media icons. When hovering inside them, but not exactly above the SVG, the border gets pink, but the SVG doesn't! This can be a common use case. Using tailwind you can apply a 'group' to the parent element and the 'group-modifier' to the child element and voilà, the SVG changes its colors, while only hovering above the parent.