HEX

File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../index/components/Footer.tsx
import React from 'react';
import { FacebookIcon, TwitterIcon, InstagramIcon, LinkedInIcon } from '../constants';
import Logo from './Logo';

const Footer: React.FC = () => {
  const socialLinks = [
    { name: 'Facebook', href: 'https://facebook.com/TheBrandApp', icon: <FacebookIcon /> },
    { name: 'Twitter', href: 'https://twitter.com/thebrandhq', icon: <TwitterIcon /> },
    { name: 'Instagram', href: 'https://www.instagram.com/thebrandapp', icon: <InstagramIcon /> },
    { name: 'LinkedIn', href: 'https://www.linkedin.com/company/the-brand-app', icon: <LinkedInIcon /> },
  ];

  const footerSections = [
    {
      title: 'Features',
      links: [
        { name: 'Brand Creator', href: 'https://www.thebrand.ai/brandcreator/index' },
        { name: 'My Designs', href: 'https://www.thebrand.ai/i/account/designs' },
        { name: 'Templates', href: 'https://www.thebrand.ai/i/designs' },
        { name: 'Brand Toolkit', href: 'https://www.thebrand.ai/insights/dashboard?feature=brandtoolkit' },
      ],
    },
    {
      title: 'Resources',
      links: [
        { name: 'Insights', href: 'https://www.thebrand.ai/insights/' },
        { name: 'Blogs', href: 'https://www.thebrand.ai/blogs' },
        { name: 'Brand Journeys', href: 'https://www.thebrand.ai/insights/dashboard?feature=browsejourneys' },
        { name: 'Sites', href: 'https://www.thebrand.ai/sites/index' },
      ],
    },
    {
      title: 'Account',
      links: [
        { name: 'My Brand Identity', href: 'https://www.thebrand.ai/i/account/build_brand' },
        { name: 'Update Brand Details', href: '#' },
        { name: 'Onboarding', href: 'https://www.thebrand.ai/insights/auth-onboard' },
      ],
    },
     {
      title: 'Company',
      links: [
        { name: 'About Us', href: '#' },
        { name: 'Contact Us', href: 'https://www.thebrand.ai/i/contact' },
        { name: 'Careers', href: '#' },
      ],
    },
  ];

  return (
    <footer className="bg-brand-midnight text-white">
      <div className="container mx-auto px-6 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
          <div className="col-span-2 lg:col-span-1">
             <a href="/" aria-label="Brand AI Homepage">
              <Logo theme="dark" />
            </a>
            <p className="mt-4 text-gray-400">Your vision, amplified.</p>
          </div>
          {footerSections.map((section) => (
            <div key={section.title}>
              <h3 className="font-bold uppercase text-gray-400">{section.title}</h3>
              <ul className="mt-4 space-y-2">
                {section.links.map((link) => (
                  <li key={link.name}>
                    <a href={link.href} className="text-gray-300 hover:text-brand-cyan transition-colors">
                      {link.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-400">&copy; {new Date().getFullYear()} Brand AI. All rights reserved.</p>
          <div className="flex space-x-4 mt-4 md:mt-0">
            {socialLinks.map((social) => (
              <a key={social.name} href={social.href} className="text-gray-400 hover:text-brand-cyan transition-colors" aria-label={social.name}>
                <span className="sr-only">{social.name}</span>
                {social.icon}
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;