Fix AppKit and ticker issues

The AI is addressing issues with AppKit functionality, a white screen on the webpage, and the crypto ticker widget. It will investigate why AppKit is not functioning as expected despite following official documentation and GitHub Copilot's suggestions. The AI will also resolve the white screen issue, which is hindering content visibility, and the "cloud of smoke" appearance. Finally, it will fix the crypto ticker widget, ensuring it displays correctly and uses the official CoinGecko logos.

Author: lovable-dev[bot]

src/components/Header/index.tsx

@@ -27,8 +27,8 @@ const Header = () => {
     <header
       className={`fixed top-0 left-0 w-full z-50 transition-all duration-500 ${
         isScrolled 
-          ? "py-0.5 bg-black/95 backdrop-blur-md shadow-lg shadow-alien-gold/10" 
-          : "py-1 bg-black/90 backdrop-blur-sm"
+          ? "py-0.5 bg-black/95 shadow-lg shadow-alien-gold/10" 
+          : "py-1 bg-black/90"
       }`}
     >
       <div className="container mx-auto px-4 lg:px-6 flex justify-between items-center relative py-2">
@@ -61,7 +61,7 @@ const Header = () => {
         )}
       </AnimatePresence>
 
-      <div className="w-full border-t border-alien-gold/20 border-b border-alien-gold/20 bg-black/50">
+      <div className="w-full border-t border-alien-gold/20 border-b border-alien-gold/20 bg-black/60">
         <PriceTicker />
       </div>
     </header>

src/components/PriceTicker.tsx

@@ -35,7 +35,7 @@ const ICONS: Record<string, string> = {
 const API = (ids: string[]) =>
   `https://api.coingecko.com/api/v3/simple/price?ids=${ids.join(',')}&vs_currencies=usd&precision=2`;
 
-const DURATION_SEC = 60; // Adjust speed here (bigger = slower)
+const DURATION_SEC = 30; // Adjust speed here (bigger = slower)
 
 const PriceTicker: React.FC = () => {
   const [prices, setPrices] = useState<Record<string, number>>({});
@@ -91,7 +91,7 @@ const PriceTicker: React.FC = () => {
   }, [prices]);
 
   return (
-    <div className="w-full overflow-hidden bg-alien-space-dark/80 backdrop-blur-sm border-t border-b border-alien-gold/20 h-[40px]">
+    <div className="w-full overflow-hidden bg-alien-space-dark/80 border-t border-b border-alien-gold/20 h-[40px]">
       {/* Local keyframes to avoid touching global CSS */}
       <style>{`
         @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }