initial commit

components/MobileOptimizedHeader.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Share2, Info } from "lucide-react";
+
+export default function MobileOptimizedHeader({ 
+  totalFonts,
+  onQuickShare 
+}) {
+  return (
+    <header className="text-center mb-6 sm:mb-8" style={{ pointerEvents: "none" }}>
+      {/* Main Title */}
+      <div className="mb-4">
+        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-2 tracking-tight">
+          <span className="bg-gradient-to-r from-yellow-300 via-pink-300 to-purple-300 bg-clip-text text-transparent">
+            FancyText
+          </span>
+          <span className="text-2xl sm:text-3xl ml-2">🔥</span>
+        </h1>
+        <p className="text-white/90 text-base sm:text-lg font-medium mb-1">
+          Make Your Bio Go Viral 🔥
+        </p>
+        <p className="text-white/70 text-sm">
+          {totalFonts}+ unique fonts • Copy & Paste ready
+        </p>
+      </div>
+
+      {/* Controls Row */}
+      <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 mb-4">
+        {/* Quick Share */}
+        <Button
+          onClick={onQuickShare}
+          variant="outline"
+          size="sm"
+          className="bg-white/10 border-white/20 text-white hover:bg-white/20 backdrop-blur-sm"
+          style={{ pointerEvents: "auto" }}
+        >
+          <Share2 className="w-4 h-4 mr-1" />
+          Share App
+        </Button>
+
+        {/* Info Badge */}
+        <div className="flex items-center gap-1 bg-green-500/20 backdrop-blur-sm rounded-full px-3 py-1">
+          <Info className="w-3 h-3 text-green-300" />
+          <span className="text-green-200 text-xs font-medium">Free & Fast</span>
+        </div>
+      </div>
+
+      {/* Feature Pills */}
+      <div className="flex flex-wrap items-center justify-center gap-2 text-xs">
+        {["📱 Mobile Optimized", "⚡ Instant Copy", "🎨 30+ Styles", "🔄 Always Updated"].map((feature, index) => (
+          <span 
+            key={index}
+            className="bg-white/10 backdrop-blur-sm text-white/80 px-2 py-1 rounded-full"
+          >
+            {feature}
+          </span>
+        ))}
+      </div>
+    </header>
+  );
+}