This guide will help you understand how to edit the Footer component to suit your needs.

Step 1: Updating Social Media Links

The SocialMediaIcons component handles links to your social media platforms.

<SocialMediaIcons 
  instagram="www.instagram.com"
  twitch="www.twitch.com"
  youtube="www.youtube.com"
/>

How to Update:

1. Replace the URLs with your actual social media profile links.

   <SocialMediaIcons 
     instagram="https://instagram.com/your-profile"
     twitch="https://twitch.com/your-profile"
     youtube="https://youtube.com/your-channel"
   />

2. Add or remove platforms by modifying the props passed to SocialMediaIcons.

Step 2: Customizing the Logo

The Logo component is used to display your brand logo and optional text.

<Logo logoType="image" logoSrc="/UI Now Mark.svg" text="UI Now" showTextWithImage />

How to Update:

• logoSrc: Replace with the path to your logo image.

• text: Change "UI Now" to your brand name.

• showTextWithImage: Set to false if you want to hide the text.

Example:

<Logo 
  logoType="image" 
  logoSrc="/path-to-your-logo.svg" 
  text="Your Brand" 
  showTextWithImage={true} 
/>

Step 3: Editing the Copyright Text

The copyright text is displayed below the logo:

<p className="mt-2 text-center text-xs/6 text-neutral-400 md:order-1 md:mt-1">
  &copy; 2025 Your Company, Inc. All rights reserved.
</p>

How to Update:

• Replace 2025 Your Company, Inc. with your company's name and the current year.

Example:

<p className="mt-2 text-center text-xs/6 text-neutral-400 md:order-1 md:mt-1">
  &copy; {new Date().getFullYear()} My Awesome Brand. All rights reserved.
</p>

Step 4: Adjusting Layout and Styling

Change Background and Border:

The footer uses Tailwind CSS for styling. Update the background and border styles:

<footer className="bg-white border-t">

• Change Background Color:

  This sets a dark background.

• Change Border:

Center or Align Content:

• The layout uses flex and justify-center. Modify these for alignment.

Step 5: Adding More Content

You can easily add additional sections, such as navigation links or a newsletter signup.

Example: Adding Navigation Links:

<div className="mt-6">
  <ul className="flex justify-center space-x-4 text-sm text-neutral-400">
    <li><a href="/privacy-policy" className="hover:text-neutral-500">Privacy Policy</a></li>
    <li><a href="/terms-of-service" className="hover:text-neutral-500">Terms of Service</a></li>
  </ul>
</div>

Testing Your Footer

1. Run Your App:

2. Verify Responsiveness:

   • Ensure the layout works on both mobile and desktop screens.

3. Check Links:

   • Test social media and navigation links to confirm they point to the correct destinations.

Final Thoughts

By customizing this Footer component, you can:

• Create a cohesive brand identity.

• Provide important links for your users.

• Highlight your presence on social media platforms.