62 lines
2.1 KiB
JavaScript
62 lines
2.1 KiB
JavaScript
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>
|
|
);
|
|
}
|