[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/components/ [ Home ]
File: Footer.jsx
Action: file_editor create /app/frontend/src/components/Footer.jsx --file-text "import React from 'react';
import { Link } from 'react-router-dom';
import { useLanguage } from '../contexts/LanguageContext';
import { Phone, Mail, MapPin, Facebook, Twitter, Instagram, Linkedin, Youtube } from 'lucide-react';
import mockData from '../mockData';

const Footer = () => {
  const { t } = useLanguage();
  const currentYear = new Date().getFullYear();

  return (
    <footer className=\"bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white\">
      <div className=\"container mx-auto px-4 py-12\">
        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">
          {/* About Section */}
          <div>
            <div className=\"flex items-center gap-3 mb-4\">
              <div className=\"w-10 h-10 bg-gradient-to-br from-emerald-500 to-teal-400 rounded-lg flex items-center justify-center\">
                <span className=\"text-white font-bold text-lg\">AF</span>
              </div>
              <div>
                <h3 className=\"font-bold text-lg\">
                  {t('Akademi Farmasi', 'Pharmacy Academy')}
                </h3>
                <p className=\"text-xs text-gray-400\">{t('Bandung', 'Bandung')}</p>
              </div>
            </div>
            <p className=\"text-sm text-gray-300 leading-relaxed\">
              {t(
                'Institusi pendidikan tinggi farmasi terkemuka yang menghasilkan lulusan profesional dan kompeten.',
                'Leading pharmaceutical higher education institution producing professional and competent graduates.'
              )}
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className=\"font-semibold text-lg mb-4\">{t('Tautan Cepat', 'Quick Links')}</h4>
            <ul className=\"space-y-2 text-sm\">
              <li>
                <a href=\"/#about\" className=\"text-gray-300 hover:text-emerald-400 transition-colors\">
                  {t('Tentang Kami', 'About Us')}
                </a>
              </li>
              <li>
                <a href=\"/#programs\" className=\"text-gray-300 hover:text-emerald-400 transition-colors\">
                  {t('Program Studi', 'Study Programs')}
                </a>
              </li>
              <li>
                <a href=\"/#news\" className=\"text-gray-300 hover:text-emerald-400 transition-colors\">
                  {t('Berita & Pengumuman', 'News & Announcements')}
                </a>
              </li>
              <li>
                <a href=\"/#contact\" className=\"text-gray-300 hover:text-emerald-400 transition-colors\">
                  {t('Hubungi Kami', 'Contact Us')}
                </a>
              </li>
            </ul>
          </div>

          {/* Programs */}
          <div>
            <h4 className=\"font-semibold text-lg mb-4\">{t('Program Kami', 'Our Programs')}</h4>
            <ul className=\"space-y-2 text-sm\">
              {mockData.programs.map((program) => (
                <li key={program.id}>
                  <a href=\"/#programs\" className=\"text-gray-300 hover:text-emerald-400 transition-colors\">
                    {t(program.name_id, program.name_en)}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className=\"font-semibold text-lg mb-4\">{t('Hubungi Kami', 'Contact Us')}</h4>
            <ul className=\"space-y-3 text-sm\">
              <li className=\"flex items-start gap-3\">
                <MapPin className=\"h-5 w-5 text-emerald-400 flex-shrink-0 mt-0.5\" />
                <span className=\"text-gray-300\">
                  {t(mockData.contact.address_id, mockData.contact.address_en)}
                </span>
              </li>
              <li className=\"flex items-center gap-3\">
                <Phone className=\"h-5 w-5 text-emerald-400 flex-shrink-0\" />
                <a href={`tel:${mockData.contact.phone}`} className=\"text-gray-300 hover:text-emerald-400 transition-colors\">
                  {mockData.contact.phone}
                </a>
              </li>
              <li className=\"flex items-center gap-3\">
                <Mail className=\"h-5 w-5 text-emerald-400 flex-shrink-0\" />
                <a href={`mailto:${mockData.contact.email}`} className=\"text-gray-300 hover:text-emerald-400 transition-colors\">
                  {mockData.contact.email}
                </a>
              </li>
            </ul>
            
            {/* Social Media */}
            <div className=\"mt-6\">
              <h5 className=\"font-semibold mb-3\">{t('Ikuti Kami', 'Follow Us')}</h5>
              <div className=\"flex gap-3\">
                <a
                  href={mockData.contact.socialMedia.facebook}
                  target=\"_blank\"
                  rel=\"noopener noreferrer\"
                  className=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors\"
                >
                  <Facebook className=\"h-4 w-4\" />
                </a>
                <a
                  href={mockData.contact.socialMedia.twitter}
                  target=\"_blank\"
                  rel=\"noopener noreferrer\"
                  className=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors\"
                >
                  <Twitter className=\"h-4 w-4\" />
                </a>
                <a
                  href={mockData.contact.socialMedia.instagram}
                  target=\"_blank\"
                  rel=\"noopener noreferrer\"
                  className=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors\"
                >
                  <Instagram className=\"h-4 w-4\" />
                </a>
                <a
                  href={mockData.contact.socialMedia.linkedin}
                  target=\"_blank\"
                  rel=\"noopener noreferrer\"
                  className=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors\"
                >
                  <Linkedin className=\"h-4 w-4\" />
                </a>
                <a
                  href={mockData.contact.socialMedia.youtube}
                  target=\"_blank\"
                  rel=\"noopener noreferrer\"
                  className=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 transition-colors\"
                >
                  <Youtube className=\"h-4 w-4\" />
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className=\"border-t border-gray-700 mt-12 pt-8 text-center\">
          <p className=\"text-sm text-gray-400\">
            © {currentYear} {t('Akademi Farmasi Bandung', 'Bandung Pharmacy Academy')}. {t('Hak Cipta Dilindungi', 'All Rights Reserved')}.
          </p>
          <p className=\"text-xs text-gray-500 mt-2\">
            {t('Dibuat dengan', 'Built with')} ❤️ {t('untuk pendidikan farmasi berkualitas', 'for quality pharmaceutical education')}
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
"
Observation: Create successful: /app/frontend/src/components/Footer.jsx