feat: replace emojis with Lucide icons in UI components

- Updated LoadingSpinner, Footer, and IdleBlur to use Hourglass, Heart, and Lock icons from lucide-react instead of emojis
- Modified PageHeader to accept React.ReactNode for icon prop, enabling component-based icons
- Enhanced StructuredData and download button with Download icon for consistency
- Improves UI scalability, accessibility, and design uniformity across the app

Author: teycir

app/components/Common.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { Hourglass } from 'lucide-react';
 
 export function ErrorMessage({ message }: { message: string }) {
   return (
@@ -18,7 +19,7 @@ export function LoadingSpinner({ text = 'Loading...' }: { text?: string }) {
   return (
     <div className="min-h-screen flex items-center justify-center">
       <div className="text-center">
-        <div className="animate-spin text-4xl mb-4">⏳</div>
+        <Hourglass className="w-12 h-12 text-neon-green mx-auto mb-4 animate-spin" />
         <p className="text-neon-green/70">{text}</p>
       </div>
     </div>
@@ -44,13 +45,13 @@ export function PageHeader({
   title, 
   subtitle 
 }: { 
-  icon: string; 
+  icon: React.ReactNode; 
   title: string; 
   subtitle?: string;
 }) {
   return (
     <div className="text-center mb-8">
-      <div className="text-6xl mb-4">{icon}</div>
+      <div className="flex justify-center mb-4">{icon}</div>
       <h1 className="text-3xl font-bold glow-text mb-4">{title}</h1>
       {subtitle && <p className="text-neon-green/70">{subtitle}</p>}
     </div>

app/components/Footer.tsx

@@ -1,11 +1,15 @@
 'use client';
 
+import { Heart, Lock } from 'lucide-react';
+
 export function Footer() {
   return (
     <footer className="fixed bottom-0 left-0 right-0 p-4 bg-dark-bg/90 backdrop-blur-sm border-t border-neon-green/10 z-50">
       <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-neon-green/50 font-mono px-2">
         <div className="flex items-center gap-2 flex-wrap justify-center">
-          <span className="text-neon-green/70">Built with 💚 and 🔒 by <a href="https://teycirbensoltane.tn" target="_blank" rel="noopener noreferrer" className="hover:text-neon-green transition-colors underline">Teycir Ben Soltane</a></span>
+          <span className="text-neon-green/70 flex items-center gap-1">
+            Built with <Heart className="w-3 h-3 inline fill-current" /> and <Lock className="w-3 h-3 inline" /> by <a href="https://teycirbensoltane.tn" target="_blank" rel="noopener noreferrer" className="hover:text-neon-green transition-colors underline">Teycir Ben Soltane</a>
+          </span>
           <span>•</span>
           <a href="/how-it-works" className="hover:text-neon-green transition-colors">How It Works</a>
           <span>•</span>

app/components/IdleBlur.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { Lock } from 'lucide-react';
 
 export function IdleBlur() {
     const [isIdle, setIsIdle] = useState(false);
@@ -59,9 +60,9 @@ export function IdleBlur() {
                             initial={{ scale: 0.8, opacity: 0 }}
                             animate={{ scale: 1, opacity: 1 }}
                             transition={{ delay: 0.2 }}
-                            className="text-neon-green/50 text-6xl"
+                            className="flex justify-center"
                         >
-                            🔒
+                            <Lock className="w-16 h-16 text-neon-green/50" />
                         </motion.div>
                         <motion.p
                             initial={{ opacity: 0 }}

app/components/StructuredData.tsx

@@ -4,37 +4,84 @@ export function StructuredData() {
   const structuredData = {
     '@context': 'https://schema.org',
     '@type': 'SoftwareApplication',
-    name: 'TimeSeal',
+    name: 'TimeSeal - Cryptographic Time-Locked Vault',
     applicationCategory: 'SecurityApplication',
     operatingSystem: 'Web',
+    url: 'https://timeseal.dev',
     offers: {
       '@type': 'Offer',
       price: '0',
       priceCurrency: 'USD',
     },
-    description: 'Cryptographic time-locked vault with dead man\'s switch. Secure encryption for messages and files that unlock automatically at a future date or after inactivity.',
+    description: 'Cryptographically enforced time-locked vault with dead man\'s switch. Create encrypted messages that unlock automatically at a future date or after inactivity. Zero-trust, edge-native AES-GCM encryption.',
     featureList: [
-      'Time-locked encryption',
-      'Dead man\'s switch',
-      'AES-GCM encryption',
-      'Zero-trust architecture',
-      'Split-key cryptography',
-      'Cloudflare edge deployment',
-      'D1 database storage',
+      'Time-locked encryption with AES-GCM-256',
+      'Dead man\'s switch with pulse mechanism',
+      'Zero-trust split-key architecture',
+      'Edge-native on Cloudflare Workers',
+      'D1 database encrypted storage',
+      'Cryptographic receipts with HMAC',
+      'Rate limiting and bot protection',
+      'Audit logging for compliance',
     ],
     screenshot: 'https://timeseal.dev/explainerimage.png',
+    author: {
+      '@type': 'Organization',
+      name: 'TimeSeal',
+      url: 'https://timeseal.dev'
+    },
+    datePublished: '2024-01-01',
+    softwareVersion: '0.5.3',
     aggregateRating: {
       '@type': 'AggregateRating',
       ratingValue: '5',
       ratingCount: '1',
     },
   };
 
+  const breadcrumbData = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: 'Home',
+        item: 'https://timeseal.dev'
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: 'How It Works',
+        item: 'https://timeseal.dev/how-it-works'
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: 'Security',
+        item: 'https://timeseal.dev/security'
+      },
+      {
+        '@type': 'ListItem',
+        position: 4,
+        name: 'FAQ',
+        item: 'https://timeseal.dev/faq'
+      }
+    ]
+  };
+
   return (
-    <Script
-      id="structured-data"
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
-    />
+    <>
+      <Script
+        id="structured-data"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
+      <Script
+        id="breadcrumb-data"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbData) }}
+      />
+    </>
   );
 }