Add favicon and update navigation and footer components

Author: arshad831

index.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Decoding Data Science | AI Consulting Directory</title>
 
+    <!-- Favicon -->
+    <link rel="icon" href="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/dds_logo.jpg" type="image/jpeg">
+    
     <!-- Social Media Share Meta Tags -->
     <meta property="og:title" content="Decoding Data Science | AI Consulting Directory">
     <meta property="og:description" content="The definitive intelligence directory for Artificial Intelligence & Gen AI consulting leaders in the Middle East.">
@@ -371,7 +374,7 @@
 
         // --- Components ---
 
-        const Navigation = ({ setCurrentView }) => (
+        const Navigation = ({ setCurrentView, setFilter }) => (
           <nav className="bg-slate-950 border-b border-slate-800 shadow-xl sticky top-0 z-50">
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               <div className="flex items-center justify-between h-20">
@@ -393,7 +396,7 @@
                 </a>
                 <div className="hidden md:block">
                   <div className="ml-10 flex items-baseline space-x-6">
-                    <button onClick={() => setCurrentView('home')} className="text-slate-300 hover:text-white hover:bg-slate-800 px-4 py-2 rounded-md text-sm font-medium transition-all">Rankings</button>
+                    <button onClick={() => { setCurrentView('home'); setFilter('All'); }} className="text-slate-300 hover:text-white hover:bg-slate-800 px-4 py-2 rounded-md text-sm font-medium transition-all">Rankings</button>
                     <a href="https://academy.decodingdatascience.com/" className="text-slate-300 hover:text-white hover:bg-slate-800 px-4 py-2 rounded-md text-sm font-medium transition-all">Academy</a>
                     <a href="https://decodingdatascience.com/" className="text-slate-300 hover:text-white hover:bg-slate-800 px-4 py-2 rounded-md text-sm font-medium transition-all">Projects</a>
                     <a href="https://nas.io/artificialintelligence/community" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2.5 rounded-md text-sm font-bold shadow-lg shadow-blue-900/20 hover:shadow-blue-600/30 transition-all border border-blue-500">
@@ -406,7 +409,7 @@
           </nav>
         );
 
-        const Footer = () => (
+        const Footer = ({ onFilterClick }) => (
           <footer className="bg-slate-950 border-t border-slate-800 text-slate-400 py-16">
             <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-12">
               <div className="col-span-1 md:col-span-1">
@@ -426,10 +429,10 @@
               <div>
                 <h4 className="text-white font-bold mb-6 tracking-wide text-sm uppercase">Rankings</h4>
                 <ul className="space-y-3 text-sm">
-                  <li><a href="https://decodingdatascience.com/" className="hover:text-blue-400 transition-colors">Diamond Tier Firms</a></li>
-                  <li><a href="https://decodingdatascience.com/" className="hover:text-blue-400 transition-colors">Platinum Tier Firms</a></li>
-                  <li><a href="https://decodingdatascience.com/" className="hover:text-blue-400 transition-colors">Gold Tier Firms</a></li>
-                  <li><a href="https://decodingdatascience.com/" className="hover:text-blue-400 transition-colors">Silver Tier Firms</a></li>
+                  <li><button onClick={() => onFilterClick('Diamond')} className="hover:text-blue-400 transition-colors text-left">Diamond Tier Firms</button></li>
+                  <li><button onClick={() => onFilterClick('Platinum')} className="hover:text-blue-400 transition-colors text-left">Platinum Tier Firms</button></li>
+                  <li><button onClick={() => onFilterClick('Gold')} className="hover:text-blue-400 transition-colors text-left">Gold Tier Firms</button></li>
+                  <li><button onClick={() => onFilterClick('Silver')} className="hover:text-blue-400 transition-colors text-left">Silver Tier Firms</button></li>
                 </ul>
               </div>
 
@@ -625,8 +628,7 @@ <h3 className="text-lg font-bold mb-4 relative z-10">Partner with {company.name}
           );
         };
 
-        const HomePage = ({ companies, onCompanyClick }) => {
-          const [filter, setFilter] = useState('All');
+        const HomePage = ({ companies, onCompanyClick, filter, setFilter }) => {
           const [searchTerm, setSearchTerm] = useState('');
 
           const levels = ['All', 'Diamond', 'Platinum', 'Gold', 'Silver', 'Bronze'];
@@ -734,6 +736,7 @@ <h3 className="text-xl font-bold text-white mb-2">No data matches found</h3>
         const App = () => {
           const [currentView, setCurrentView] = useState('home');
           const [selectedCompany, setSelectedCompany] = useState(null);
+          const [filter, setFilter] = useState('All');
 
           useEffect(() => {
             window.scrollTo(0, 0);
@@ -749,15 +752,23 @@ <h3 className="text-xl font-bold text-white mb-2">No data matches found</h3>
             setSelectedCompany(null);
           };
 
+          const handleFooterFilter = (level) => {
+              setFilter(level);
+              setCurrentView('home');
+              window.scrollTo(0, 0);
+          };
+
           return (
             <div className="font-sans text-slate-200 bg-slate-950 min-h-screen flex flex-col selection:bg-blue-500 selection:text-white">
-              <Navigation setCurrentView={setCurrentView} />
+              <Navigation setCurrentView={setCurrentView} setFilter={setFilter} />
 
               <main className="flex-grow">
                 {currentView === 'home' ? (
                   <HomePage 
                     companies={companiesData} 
-                    onCompanyClick={handleCompanyClick} 
+                    onCompanyClick={handleCompanyClick}
+                    filter={filter}
+                    setFilter={setFilter} 
                   />
                 ) : (
                   <DetailView 
@@ -767,7 +778,7 @@ <h3 className="text-xl font-bold text-white mb-2">No data matches found</h3>
                 )}
               </main>
 
-              <Footer />
+              <Footer onFilterClick={handleFooterFilter} />
             </div>
           );
         };