init

pages/About.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Target, Users, Zap } from 'lucide-react';
+
+export const About: React.FC = () => {
+  return (
+    <div className="pt-20">
+      {/* Hero */}
+      <div className="relative bg-gray-900 py-24 px-4 sm:px-6 lg:px-8">
+        <div className="absolute inset-0 overflow-hidden">
+           <img
+            src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"
+            alt="Office team"
+            className="w-full h-full object-cover opacity-20"
+          />
+        </div>
+        <div className="relative max-w-7xl mx-auto text-center">
+          <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
+            Rólunk
+          </h1>
+          <p className="mt-6 text-xl text-gray-300 max-w-3xl mx-auto">
+            A Motion Web Stúdió (Balogh Bence Benedek) egy fiatalos, dinamikus csapat, akik elkötelezettek a minőségi webfejlesztés mellett.
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="bg-white py-16 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
+            <div>
+              <h2 className="text-3xl font-bold text-gray-900 mb-6">A küldetésünk</h2>
+              <p className="text-lg text-gray-600 leading-relaxed mb-4">
+                Hiszünk abban, hogy egy weboldal több, mint digitális névjegykártya. Egy jól felépített oldal értékesítő gépezet, márkaépítő eszköz és ügyfélszolgálati csatorna egyben.
+              </p>
+              <p className="text-lg text-gray-600 leading-relaxed">
+                Célunk, hogy a magyar kis- és középvállalkozásokat olyan digitális eszközökkel lássuk el, amelyekkel versenyképesek maradhatnak a nemzetközi piacon is. Minden projektbe szívünket-lelkünket beletesszük.
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <img className="rounded-xl shadow-lg w-full h-48 object-cover" src="https://images.unsplash.com/photo-1531482615713-2afd69097998?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Working" />
+              <img className="rounded-xl shadow-lg w-full h-48 object-cover mt-8" src="https://images.unsplash.com/photo-1504384308090-c54be3852f33?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Coding" />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="bg-gray-50 p-8 rounded-2xl text-center">
+              <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Target className="text-primary w-6 h-6" />
+              </div>
+              <h3 className="text-xl font-bold mb-2">Eredményorientáltság</h3>
+              <p className="text-gray-600">Nem csak szépet alkotunk, hanem olyat, ami működik. A konverzió és a ROI a legfontosabb mérőszámunk.</p>
+            </div>
+            <div className="bg-gray-50 p-8 rounded-2xl text-center">
+              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Users className="text-secondary w-6 h-6" />
+              </div>
+              <h3 className="text-xl font-bold mb-2">Ügyfélközpontúság</h3>
+              <p className="text-gray-600">Folyamatos kommunikáció és átlátható folyamatok. Ön mindig tudja, hol tart a projektje.</p>
+            </div>
+            <div className="bg-gray-50 p-8 rounded-2xl text-center">
+              <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Zap className="text-primary w-6 h-6" />
+              </div>
+              <h3 className="text-xl font-bold mb-2">Modern Technológia</h3>
+              <p className="text-gray-600">React, TypeScript, Tailwind. A legmodernebb eszközöket használjuk a gyors és biztonságos működésért.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/Admin.tsx

@@ -0,0 +1,588 @@
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { 
+  ChevronLeft, RefreshCw, BarChart2, Users, ShoppingCart, Package, 
+  FileText, Globe, Sparkles, MessageSquare, AlertCircle, CheckCircle, 
+  XCircle, Clock, Activity, Save, Mail, Rocket, Edit3, Bell, 
+  AlertTriangle, Archive, Send, Layout, History
+} from 'lucide-react';
+import { Button } from '../components/Button';
+import { supabase, isSupabaseConfigured } from '../lib/supabaseClient';
+import { ProductPackage } from '../types';
+import { defaultPlans } from '../lib/defaultPlans';
+import { generateOrderPrompts, PromptResult } from '../lib/promptGenerator';
+
+interface AdminUser {
+  id: string;
+  email: string;
+  first_name?: string;
+  last_name?: string;
+  created_at: string;
+  role: string;
+}
+
+interface OrderHistoryEntry {
+  id: string;
+  status: string;
+  changed_at: string;
+}
+
+interface EmailLogEntry {
+  id: string;
+  email_type: string;
+  sent_at: string;
+}
+
+interface AdminOrder {
+  id: string;
+  user_id: string;
+  displayId: string;
+  customer: string;
+  email: string;
+  package: string;
+  status: string; 
+  date: string;
+  amount: string;
+  details?: any;
+  history?: OrderHistoryEntry[];
+  emailLogs?: EmailLogEntry[];
+}
+
+export const Admin: React.FC = () => {
+  const { user, isAdmin, loading } = useAuth();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState<'overview' | 'users' | 'orders' | 'plans'>('overview');
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [orders, setOrders] = useState<AdminOrder[]>([]);
+  const [plans, setPlans] = useState<ProductPackage[]>([]);
+  const [loadingData, setLoadingData] = useState(false);
+  const [visitorStats, setVisitorStats] = useState({ month: 0, week: 0 });
+  const [statusUpdating, setStatusUpdating] = useState<string | null>(null);
+  const [planSaving, setPlanSaving] = useState<string | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  
+  const [viewOrder, setViewOrder] = useState<AdminOrder | null>(null);
+  const [generatedPrompts, setGeneratedPrompts] = useState<PromptResult[]>([]);
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const [demoUrlInput, setDemoUrlInput] = useState('');
+  const [savingDemoUrl, setSavingDemoUrl] = useState(false);
+  const [emailSending, setEmailSending] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!loading && !isAdmin) {
+      navigate('/dashboard');
+    }
+  }, [isAdmin, loading, navigate]);
+
+  useEffect(() => {
+    if (isAdmin) fetchAdminData();
+  }, [isAdmin]);
+
+  const fetchAdminData = async () => {
+    setLoadingData(true);
+    setErrorMsg(null);
+    
+    if (!isSupabaseConfigured) {
+        setPlans(defaultPlans);
+        setLoadingData(false);
+        return;
+    }
+
+    try {
+      const { data: profiles, error: pErr } = await supabase.from('profiles').select('*');
+      if (pErr) throw pErr;
+
+      let rolesData: any[] = [];
+      try {
+        const { data: roles } = await supabase.from('roles').select('*');
+        rolesData = roles || [];
+      } catch (e) {
+        console.warn("Could not fetch roles table.");
+      }
+
+      setUsers(profiles.map(p => ({
+        id: p.id,
+        email: p.email || 'N/A',
+        first_name: p.first_name,
+        last_name: p.last_name,
+        created_at: p.created_at,
+        role: rolesData.find(r => r.id === p.id)?.role || (p.email === 'motionstudiohq@gmail.com' ? 'admin' : 'user')
+      })));
+
+      const { data: oData, error: oErr } = await supabase.from('orders').select('*').order('created_at', { ascending: false });
+      if (oErr) throw oErr;
+      setOrders(oData.map(o => ({
+        ...o,
+        displayId: o.id.substring(0, 8).toUpperCase(),
+        customer: o.customer_name,
+        email: o.customer_email
+      })));
+
+      const { data: plData } = await supabase.from('plans').select('*').order('price', { ascending: true });
+      setPlans(plData && plData.length > 0 ? plData : defaultPlans);
+
+      const { count: mCount } = await supabase.from('page_visits').select('*', { count: 'exact', head: true });
+      setVisitorStats({ month: mCount || 0, week: Math.floor((mCount || 0) / 4) });
+
+    } catch (err: any) {
+      setErrorMsg(err.message || "Hiba történt az adatok lekérésekor.");
+    } finally {
+      setLoadingData(false);
+    }
+  };
+
+  const fetchOrderHistory = async (orderId: string) => {
+    if (!isSupabaseConfigured) return [];
+    try {
+      const { data } = await supabase
+        .from('order_status_history')
+        .select('*')
+        .eq('order_id', orderId)
+        .order('changed_at', { ascending: false });
+      return data || [];
+    } catch (e) {
+      return [];
+    }
+  };
+
+  const fetchEmailLogs = async (orderId: string) => {
+    if (!isSupabaseConfigured) return [];
+    try {
+      const { data } = await supabase
+        .from('email_log')
+        .select('*')
+        .eq('order_id', orderId)
+        .order('sent_at', { ascending: false });
+      return data || [];
+    } catch (e) {
+      console.warn("Could not fetch email_log table.");
+      return [];
+    }
+  };
+
+  const handleStatusChange = async (orderId: string, newStatus: string) => {
+    if (statusUpdating) return;
+    setStatusUpdating(orderId);
+    
+    try {
+      if (isSupabaseConfigured) {
+        const { error } = await supabase.from('orders').update({ status: newStatus }).eq('id', orderId);
+        if (error) throw error;
+        
+        await supabase.from('order_status_history').insert({ order_id: orderId, status: newStatus });
+        const newHist = await fetchOrderHistory(orderId);
+        
+        setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
+        if (viewOrder && viewOrder.id === orderId) {
+          setViewOrder({ ...viewOrder, status: newStatus, history: newHist });
+        }
+      } else {
+        setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
+        if (viewOrder && viewOrder.id === orderId) {
+          setViewOrder({ ...viewOrder, status: newStatus });
+        }
+      }
+    } catch (e: any) {
+      alert("Hiba: " + e.message);
+    } finally {
+      setStatusUpdating(null);
+    }
+  };
+
+  const handleUpdateDemoUrl = async () => {
+    if (!viewOrder || savingDemoUrl) return;
+    setSavingDemoUrl(true);
+    
+    const orderId = viewOrder.id;
+    const targetStatus = 'pending_feedback';
+    const updatedDetails = { ...(viewOrder.details || {}), demoUrl: demoUrlInput };
+    
+    try {
+      if (isSupabaseConfigured) {
+        const { error } = await supabase.from('orders').update({ 
+          details: updatedDetails, 
+          status: targetStatus 
+        }).eq('id', orderId);
+        
+        if (error) throw error;
+
+        await supabase.from('order_status_history').insert({ order_id: orderId, status: targetStatus });
+        const newHist = await fetchOrderHistory(orderId);
+        
+        setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: targetStatus, details: updatedDetails } : o));
+        setViewOrder({ ...viewOrder, status: targetStatus, details: updatedDetails, history: newHist });
+        
+        alert(`Sikeres mentés és visszajelzés kérése!`);
+      } else {
+        setViewOrder({ ...viewOrder, details: updatedDetails });
+        alert("Demo URL mentve.");
+      }
+    } catch (e: any) {
+      alert("Hiba: " + e.message);
+    } finally {
+      setSavingDemoUrl(false);
+    }
+  };
+
+  const handleViewDetails = async (order: AdminOrder) => {
+    setLoadingData(true);
+    const history = await fetchOrderHistory(order.id);
+    const emailLogs = await fetchEmailLogs(order.id);
+    setViewOrder({ ...order, history, emailLogs });
+    setDemoUrlInput(order.details?.demoUrl || '');
+    setGeneratedPrompts([]);
+    setLoadingData(false);
+  };
+
+  const handleSendEmail = async (emailType: string) => {
+    if (!viewOrder || emailSending) return;
+    setEmailSending(emailType);
+
+    try {
+      console.log(`Email notification trigger: ${emailType}`);
+      
+      if (isSupabaseConfigured) {
+        const { error } = await supabase.from('email_log').insert({
+          order_id: viewOrder.id,
+          email_type: emailType
+        });
+        
+        if (error) throw error;
+        
+        const newLogs = await fetchEmailLogs(viewOrder.id);
+        setViewOrder({ ...viewOrder, emailLogs: newLogs });
+        
+        alert(`E-mail ("${emailType}") naplózva és kiküldve (szimulált).`);
+      } else {
+        alert(`E-mail értesítő előkészítve: "${emailType}"\n\nJelenleg ez a funkció csak placeholder.`);
+      }
+    } catch (e: any) {
+      alert("Hiba az e-mail naplózásakor: " + e.message);
+    } finally {
+      setEmailSending(null);
+    }
+  };
+
+  const StatusBadge = ({ status }: { status: string }) => {
+    const configs: any = {
+      new: { label: 'Új', color: 'bg-blue-100 text-blue-800' },
+      in_progress: { label: 'Folyamatban', color: 'bg-yellow-100 text-yellow-800' },
+      pending_feedback: { label: 'Visszajelzés', color: 'bg-purple-100 text-purple-800' },
+      completed: { label: 'Kész', color: 'bg-green-100 text-green-800' },
+      cancelled: { label: 'Törölve', color: 'bg-gray-100 text-gray-800' }
+    };
+    const c = configs[status] || configs.new;
+    return <span className={`text-[10px] uppercase font-black px-2 py-0.5 rounded-full ${c.color}`}>{c.label}</span>;
+  };
+
+  if (loading) return <div className="min-h-screen flex items-center justify-center font-bold text-primary">Admin felület...</div>;
+  if (!isAdmin) return null;
+
+  return (
+    <div className="pt-24 bg-gray-50 min-h-screen pb-20 font-sans text-gray-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-4">
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+               <button onClick={() => navigate('/dashboard')} className="p-2 hover:bg-gray-200 rounded-full transition-colors bg-white shadow-sm border border-gray-100">
+                  <ChevronLeft className="w-5 h-5 text-gray-500" />
+               </button>
+               <span className="text-[10px] font-black text-red-600 bg-red-50 px-3 py-1 rounded-full border border-red-100 uppercase tracking-widest">Admin Access</span>
+            </div>
+            <h1 className="text-4xl font-black tracking-tighter text-gray-900">Vezérlőpult</h1>
+          </div>
+          <Button variant="white" size="sm" onClick={fetchAdminData} disabled={loadingData} className="border-gray-200 shadow-sm font-bold uppercase text-[10px] tracking-widest">
+            <RefreshCw className={`w-4 h-4 mr-2 ${loadingData ? 'animate-spin' : ''}`} /> Adatok frissítése
+          </Button>
+        </div>
+
+        <div className="flex gap-2 mb-10 bg-white p-2 rounded-[24px] border border-gray-100 shadow-sm w-fit">
+          {[
+            { id: 'overview', label: 'Statisztika', icon: BarChart2 },
+            { id: 'users', label: 'Felhasználók', icon: Users },
+            { id: 'orders', label: 'Rendelések', icon: ShoppingCart },
+            { id: 'plans', label: 'Csomagok', icon: Package }
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as any)}
+              className={`flex items-center gap-2 px-6 py-3 rounded-2xl text-sm font-bold transition-all ${
+                activeTab === tab.id ? 'bg-primary text-white shadow-lg' : 'text-gray-500 hover:bg-gray-50'
+              }`}
+            >
+              <tab.icon className="w-4 h-4" />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="animate-fade-in">
+          {activeTab === 'overview' && (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm">
+                 <p className="text-xs font-bold text-gray-400 uppercase mb-3 tracking-widest">Látogatók</p>
+                 <h3 className="text-5xl font-black text-gray-900">{visitorStats.month}</h3>
+              </div>
+              <div className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm">
+                 <p className="text-xs font-bold text-gray-400 uppercase mb-3 tracking-widest">Rendelések</p>
+                 <h3 className="text-5xl font-black text-gray-900">{orders.length}</h3>
+              </div>
+              <div className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm">
+                 <p className="text-xs font-bold text-gray-400 uppercase mb-3 tracking-widest">Regisztrációk</p>
+                 <h3 className="text-5xl font-black text-gray-900">{users.length}</h3>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'users' && (
+            <div className="bg-white rounded-[32px] border border-gray-100 overflow-hidden shadow-sm">
+              <table className="w-full text-left">
+                <thead className="bg-gray-50/50 border-b border-gray-100">
+                  <tr className="text-xs font-bold text-gray-400 uppercase tracking-widest">
+                    <th className="px-10 py-6">Felhasználó Neve</th>
+                    <th className="px-10 py-6">E-mail</th>
+                    <th className="px-10 py-6">Szint</th>
+                    <th className="px-10 py-6 text-right">Regisztráció</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-50 font-medium">
+                  {users.map(u => (
+                    <tr key={u.id} className="hover:bg-gray-50/50 transition-colors">
+                      <td className="px-10 py-6">
+                         <span className="font-black text-gray-900">{u.last_name || ''} {u.first_name || ''}</span>
+                         {(!u.last_name && !u.first_name) && <span className="text-gray-400 italic">Nincs megadva</span>}
+                      </td>
+                      <td className="px-10 py-6">
+                         <span className="text-sm font-bold text-gray-900">{u.email}</span>
+                      </td>
+                      <td className="px-10 py-6">
+                        <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${u.role === 'admin' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'}`}>{u.role}</span>
+                      </td>
+                      <td className="px-10 py-6 text-right text-sm text-gray-500">{new Date(u.created_at).toLocaleDateString('hu-HU')}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {activeTab === 'orders' && (
+            <div className="bg-white rounded-[32px] border border-gray-100 overflow-hidden shadow-sm">
+              <table className="w-full text-left">
+                <thead className="bg-gray-50/50 border-b border-gray-100 text-xs font-bold text-gray-400 uppercase tracking-widest">
+                  <tr>
+                    <th className="px-10 py-6">Ügyfél</th>
+                    <th className="px-10 py-6">Csomag</th>
+                    <th className="px-10 py-6">Státusz</th>
+                    <th className="px-10 py-6 text-right">Művelet</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-50">
+                  {orders.map(o => (
+                    <tr key={o.id} className="hover:bg-gray-50/30 transition-colors">
+                      <td className="px-10 py-6">
+                        <p className="font-black leading-tight text-gray-900">{o.customer}</p>
+                        <p className="text-[11px] text-gray-500 font-bold">{o.email}</p>
+                      </td>
+                      <td className="px-10 py-6 text-sm font-bold text-primary">{o.package}</td>
+                      <td className="px-10 py-6"><StatusBadge status={o.status} /></td>
+                      <td className="px-10 py-6 text-right">
+                        <Button size="sm" variant="outline" onClick={() => handleViewDetails(o)} className="rounded-2xl border-gray-200 px-6 font-black uppercase text-[10px] tracking-widest">Kezelés</Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {activeTab === 'plans' && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+              {plans.map((p, i) => (
+                <div key={p.id} className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm flex flex-col">
+                  <input type="text" value={p.name} onChange={e => { const n = [...plans]; n[i].name = e.target.value; setPlans(n); }} className="text-xl font-black border-b border-gray-200 focus:border-primary outline-none w-full pb-1 text-black bg-white mb-6" />
+                  <textarea rows={8} value={p.features.join('\n')} onChange={e => { const n = [...plans]; n[i].features = e.target.value.split('\n'); setPlans(n); }} className="text-sm p-4 bg-white rounded-2xl border border-gray-200 w-full resize-none outline-none focus:ring-4 focus:ring-primary/5 focus:border-primary font-medium text-black mb-8" />
+                  <Button fullWidth onClick={() => { setPlanSaving(p.id); supabase.from('plans').upsert(p).then(() => { setPlanSaving(null); alert("Mentve!"); }); }} disabled={planSaving === p.id}>
+                    {planSaving === p.id ? <RefreshCw className="w-5 h-5 animate-spin" /> : <span className="flex items-center gap-2"><Save className="w-5 h-5" /> Mentés</span>}
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {viewOrder && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/80 backdrop-blur-sm overflow-y-auto">
+            <div className="bg-white rounded-[40px] shadow-2xl w-full max-w-6xl max-h-[95vh] overflow-hidden flex flex-col animate-fade-in-up border border-white/10">
+              <div className="px-10 py-8 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+                <div className="flex items-center gap-6">
+                   <div className="w-14 h-14 bg-white rounded-3xl shadow-md flex items-center justify-center text-primary border border-gray-100">
+                      <ShoppingCart className="w-7 h-7" />
+                   </div>
+                   <div>
+                      <h2 className="text-3xl font-black tracking-tighter text-gray-900">{viewOrder.customer}</h2>
+                      <p className="text-sm text-gray-400 font-bold uppercase tracking-widest">{viewOrder.email} • ID: {viewOrder.displayId}</p>
+                   </div>
+                </div>
+                <button onClick={() => setViewOrder(null)} className="p-3 hover:bg-gray-200 rounded-full transition-all bg-white border border-gray-100">
+                  <XCircle className="w-7 h-7 text-gray-400" />
+                </button>
+              </div>
+
+              <div className="flex-grow overflow-y-auto p-10 lg:p-14 space-y-16 bg-gray-50/30">
+                <div className="grid md:grid-cols-12 gap-16">
+                  <div className="md:col-span-8 space-y-12">
+                    <section>
+                       <h3 className="text-[11px] font-black text-gray-400 uppercase tracking-[0.3em] mb-6 flex items-center gap-2"><FileText className="w-4 h-4" /> Projekt részletei</h3>
+                       <div className="bg-white p-8 rounded-[32px] border border-gray-100 shadow-sm text-black space-y-6">
+                          <div className="grid grid-cols-2 gap-4">
+                             <div><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Csomag</p><p className="font-bold text-primary">{viewOrder.package}</p></div>
+                             <div><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Összeg</p><p className="font-bold text-gray-900">{viewOrder.amount}</p></div>
+                          </div>
+                          <div><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Domain</p><p className="font-bold bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-100 inline-block text-gray-900">{viewOrder.details?.domainName || 'Nincs'}</p></div>
+                          <div className="pt-6 border-t border-gray-200"><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Leírás:</p><p className="italic leading-relaxed font-medium text-gray-800">"{viewOrder.details?.description || 'Nincs'}"</p></div>
+                       </div>
+                    </section>
+
+                    <section>
+                      <h3 className="text-[11px] font-black text-gray-400 uppercase tracking-[0.3em] mb-6">Státusz módosítása</h3>
+                      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+                         {[
+                           { id: 'new', label: 'Új' },
+                           { id: 'in_progress', label: 'Folyamatban' },
+                           { id: 'pending_feedback', label: 'Visszajelzés' },
+                           { id: 'completed', label: 'Kész' },
+                           { id: 'cancelled', label: 'Törölve' }
+                         ].map(s => (
+                           <button 
+                             key={s.id} 
+                             onClick={() => handleStatusChange(viewOrder.id, s.id)} 
+                             disabled={statusUpdating === viewOrder.id}
+                             className={`px-4 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all border-2 flex items-center justify-between gap-2 ${viewOrder.status === s.id ? 'bg-gray-900 text-white border-gray-900 shadow-xl' : 'bg-white text-gray-500 border-gray-100 hover:border-primary/40'}`}
+                           >
+                             <span>{s.label}</span>
+                             {viewOrder.status === s.id && <CheckCircle className="w-3 h-3 text-green-400" />}
+                           </button>
+                         ))}
+                      </div>
+                    </section>
+
+                    {/* EMAIL NOTIFICATIONS & LOGS COMBINED */}
+                    <section className="space-y-8">
+                       <div>
+                          <h3 className="text-[11px] font-black text-gray-400 uppercase tracking-[0.3em] mb-6 flex items-center gap-2"><Mail className="w-4 h-4" /> E-mail értesítők</h3>
+                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                              {[
+                                { label: 'Fejlesztés megkezdése', icon: Rocket },
+                                { label: 'Demó oldal elkészült', icon: Layout },
+                                { label: 'Módosítások fejlesztése', icon: Edit3 },
+                                { label: '1 hete nincs visszajelzés', icon: Bell },
+                                { label: '2 hete nincs visszajelzés', icon: AlertTriangle },
+                                { label: 'Projekt lezárva (Nincs válasz)', icon: Archive },
+                                { label: 'Végleges oldal elérhető', icon: CheckCircle }
+                              ].map((email, idx) => (
+                                <button
+                                  key={idx}
+                                  onClick={() => handleSendEmail(email.label)}
+                                  disabled={!!emailSending}
+                                  className="flex items-center gap-4 p-4 bg-white border border-gray-100 rounded-[20px] hover:border-primary hover:shadow-md transition-all text-left group disabled:opacity-50"
+                                >
+                                  <div className="w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center text-gray-400 group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                                    {emailSending === email.label ? <RefreshCw className="w-5 h-5 animate-spin" /> : <email.icon className="w-5 h-5" />}
+                                  </div>
+                                  <div className="flex-grow">
+                                    <p className="text-xs font-bold text-gray-900">{email.label}</p>
+                                    <p className="text-[9px] text-gray-400 uppercase font-black tracking-widest mt-0.5">Értesítő küldése</p>
+                                  </div>
+                                  <Send className="w-3 h-3 text-gray-300 group-hover:text-primary group-hover:translate-x-1 transition-all" />
+                                </button>
+                              ))}
+                          </div>
+                       </div>
+
+                       {/* IN-PLACE EMAIL LOG */}
+                       <div className="bg-purple-50/50 p-8 rounded-[32px] border border-purple-100 shadow-sm">
+                          <h4 className="text-[11px] font-black text-purple-600 uppercase tracking-[0.3em] mb-6 flex items-center gap-2"><History className="w-4 h-4" /> Korábban kiküldött e-mailek</h4>
+                          <div className="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-purple-200">
+                              {viewOrder.emailLogs && viewOrder.emailLogs.length > 0 ? (
+                                viewOrder.emailLogs.map((log) => (
+                                  <div key={log.id} className="relative pl-8">
+                                    <div className={`absolute left-0 top-1.5 w-6 h-6 rounded-full border-4 border-white shadow-sm z-10 bg-purple-500`} />
+                                    <div className="text-black">
+                                        <p className="text-xs font-bold text-gray-900">{log.email_type}</p>
+                                        <p className="text-[10px] font-black text-purple-400 uppercase tracking-widest mt-0.5">{new Date(log.sent_at).toLocaleString('hu-HU')}</p>
+                                    </div>
+                                  </div>
+                                ))
+                              ) : (
+                                <p className="text-xs text-gray-400 italic pl-8">Még nem küldtünk e-mailt ehhez a rendeléshez.</p>
+                              )}
+                          </div>
+                       </div>
+                    </section>
+
+                    <section className="pt-8 border-t border-gray-100">
+                       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 gap-4">
+                          <h3 className="text-2xl font-black text-gray-900 flex items-center gap-3 uppercase tracking-tighter"><Sparkles className="w-7 h-7 text-purple-600" /> AI Fejlesztői Promptok</h3>
+                          <Button size="sm" onClick={() => setGeneratedPrompts(generateOrderPrompts(viewOrder))}>Promptok Generálása</Button>
+                       </div>
+                       <div className="grid gap-6">
+                          {generatedPrompts.map((p, i) => (
+                            <div key={i} className="border border-gray-100 rounded-[32px] overflow-hidden bg-white shadow-sm">
+                               <div className="bg-gray-50/50 px-8 py-4 flex justify-between items-center border-b border-gray-100">
+                                  <span className="text-[11px] font-black text-gray-600 uppercase tracking-widest">{p.title}</span>
+                                  <button onClick={() => { navigator.clipboard.writeText(p.content); setCopiedIndex(i); setTimeout(() => setCopiedIndex(null), 2000); }} className={`text-[10px] font-black px-4 py-1.5 rounded-full uppercase tracking-widest ${copiedIndex === i ? 'bg-green-500 text-white' : 'bg-primary/10 text-primary'}`}>{copiedIndex === i ? 'MÁSOLVA!' : 'MÁSOLÁS'}</button>
+                               </div>
+                               <div className="p-8 bg-gray-900 overflow-x-auto"><pre className="text-gray-300 text-[11px] font-mono leading-relaxed"><code>{p.content}</code></pre></div>
+                            </div>
+                          ))}
+                       </div>
+                    </section>
+                  </div>
+
+                  <div className="md:col-span-4 space-y-10 border-l border-gray-100 pl-10">
+                    <section className="bg-blue-50/50 p-8 rounded-[40px] border border-blue-100 shadow-sm">
+                       <h3 className="text-blue-900 font-black mb-6 flex items-center gap-3 text-lg uppercase tracking-tighter"><Globe className="w-5 h-5" /> Demo URL közzététele</h3>
+                       <div className="flex flex-col gap-3">
+                          <input 
+                            type="text" 
+                            value={demoUrlInput} 
+                            onChange={e => setDemoUrlInput(e.target.value)} 
+                            placeholder="https://..." 
+                            className="w-full px-5 py-4 rounded-2xl border border-gray-200 bg-white text-black text-sm font-bold outline-none focus:border-blue-500 transition-all shadow-sm" 
+                          />
+                          <button 
+                            onClick={handleUpdateDemoUrl} 
+                            disabled={savingDemoUrl} 
+                            className="bg-blue-600 hover:bg-blue-700 text-white font-black px-6 py-4 rounded-2xl text-xs uppercase tracking-widest transition-all disabled:opacity-50 shadow-lg shadow-blue-200"
+                          >
+                            {savingDemoUrl ? 'MENTÉS...' : 'PUBLIKÁLÁS ÉS VISSZAJELZÉS KÉRÉSE'}
+                          </button>
+                       </div>
+                    </section>
+
+                    <section>
+                       <h3 className="text-gray-900 font-black mb-6 flex items-center gap-3 text-lg uppercase tracking-tighter"><Clock className="w-5 h-5 text-primary" /> Státusz Történet</h3>
+                       <div className="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-gray-100">
+                          {viewOrder.history?.map((h, i) => (
+                            <div key={h.id} className="relative pl-8">
+                               <div className={`absolute left-0 top-1.5 w-6 h-6 rounded-full border-4 border-white shadow-sm z-10 ${i === 0 ? 'bg-primary' : 'bg-gray-300'}`} />
+                               <div className="text-black">
+                                  <StatusBadge status={h.status} />
+                                  <p className="text-[11px] font-bold text-gray-500 mt-1 uppercase">{new Date(h.changed_at).toLocaleString('hu-HU')}</p>
+                               </div>
+                            </div>
+                          ))}
+                       </div>
+                    </section>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

pages/Blog.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+export const Blog: React.FC = () => {
+  const posts = [
+    {
+      id: 1,
+      title: "Miért fontos a gyors weboldal 2024-ben?",
+      excerpt: "A betöltési sebesség nemcsak a felhasználói élményt, hanem a Google helyezést is drasztikusan befolyásolja.",
+      date: "2024. Március 15.",
+      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      id: 2,
+      title: "Webshop trendek: Mire figyeljünk idén?",
+      excerpt: "Az AI alapú ajánlók és a mobilfizetési megoldások térnyerése az e-kereskedelemben.",
+      date: "2024. Február 28.",
+      image: "https://images.unsplash.com/photo-1556742049-0cfed4f7a07d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      id: 3,
+      title: "SEO alapok kezdőknek",
+      excerpt: "Hogyan optimalizáld weboldalad tartalmát, hogy a Google szeresse?",
+      date: "2024. Február 10.",
+      image: "https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
+    }
+  ];
+
+  return (
+    <div className="pt-20 bg-gray-50 min-h-screen">
+       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Blog</h1>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Hírek, tippek és szakmai cikkek a webfejlesztés és online marketing világából.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {posts.map((post) => (
+            <article key={post.id} className="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
+              <img src={post.image} alt={post.title} className="w-full h-48 object-cover" />
+              <div className="p-6">
+                <span className="text-sm text-primary font-semibold">{post.date}</span>
+                <h3 className="text-xl font-bold text-gray-900 mt-2 mb-3 hover:text-primary cursor-pointer">{post.title}</h3>
+                <p className="text-gray-600 text-sm mb-4">{post.excerpt}</p>
+                <button className="text-primary font-medium hover:underline">Olvass tovább &rarr;</button>
+              </div>
+            </article>
+          ))}
+        </div>
+        
+        <div className="mt-12 text-center p-8 border-2 border-dashed border-gray-300 rounded-xl bg-white/50">
+          <p className="text-gray-500 font-medium">További cikkek hamarosan feltöltésre kerülnek...</p>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/Contact.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import { Mail, Phone, MapPin, Send } from 'lucide-react';
+import { Button } from '../components/Button';
+
+export const Contact: React.FC = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    service: 'webdev',
+    message: ''
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Simulate API call
+    console.log('Form submitted:', formData);
+    setSubmitted(true);
+    setTimeout(() => setSubmitted(false), 5000);
+  };
+
+  return (
+    <div className="pt-20 bg-white min-h-screen">
+      <div className="bg-gray-900 py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-4xl font-extrabold text-white mb-4">Lépjen velünk kapcsolatba</h1>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+            Készen áll arra, hogy megvalósítsa elképzeléseit? Töltse ki az űrlapot, és hamarosan felvesszük Önnel a kapcsolatot!
+          </p>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 -mt-10">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Contact Info Card */}
+          <div className="bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-xl p-8 text-white h-fit">
+            <h3 className="text-2xl font-bold mb-6">Elérhetőségeink</h3>
+            <div className="space-y-6">
+              <div className="flex items-start space-x-4">
+                <div className="p-3 bg-white/20 rounded-lg">
+                  <Phone className="w-6 h-6" />
+                </div>
+                <div>
+                  <p className="text-blue-100 text-sm">Telefon</p>
+                  <p className="font-semibold">+36 30 123 4567</p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-4">
+                 <div className="p-3 bg-white/20 rounded-lg">
+                  <Mail className="w-6 h-6" />
+                </div>
+                <div>
+                  <p className="text-blue-100 text-sm">E-mail</p>
+                  <p className="font-semibold">info@motionweb.hu</p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-4">
+                 <div className="p-3 bg-white/20 rounded-lg">
+                  <MapPin className="w-6 h-6" />
+                </div>
+                <div>
+                  <p className="text-blue-100 text-sm">Iroda</p>
+                  <p className="font-semibold">Budapest, Magyarország</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Form */}
+          <div className="lg:col-span-2 bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
+            {submitted ? (
+              <div className="h-full flex flex-col items-center justify-center text-center py-10">
+                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
+                  <Send className="w-8 h-8 text-green-600" />
+                </div>
+                <h3 className="text-2xl font-bold text-gray-900 mb-2">Köszönjük megkeresését!</h3>
+                <p className="text-gray-600">Munkatársunk hamarosan felveszi Önnel a kapcsolatot a megadott elérhetőségeken.</p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Név</label>
+                    <input
+                      type="text"
+                      name="name"
+                      id="name"
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
+                      placeholder="Teljes név"
+                      value={formData.name}
+                      onChange={handleChange}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">E-mail cím</label>
+                    <input
+                      type="email"
+                      name="email"
+                      id="email"
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
+                      placeholder="pelda@email.com"
+                      value={formData.email}
+                      onChange={handleChange}
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                   <div>
+                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Telefonszám</label>
+                    <input
+                      type="tel"
+                      name="phone"
+                      id="phone"
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
+                      placeholder="+36 30 123 4567"
+                      value={formData.phone}
+                      onChange={handleChange}
+                    />
+                  </div>
+                   <div>
+                    <label htmlFor="service" className="block text-sm font-medium text-gray-700 mb-1">Érdeklődés tárgya</label>
+                    <select
+                      name="service"
+                      id="service"
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
+                      value={formData.service}
+                      onChange={handleChange}
+                    >
+                      <option value="webdev">Egyedi Weboldal</option>
+                      <option value="webshop">Webshop</option>
+                      <option value="marketing">SEO & Marketing</option>
+                      <option value="other">Egyéb</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Üzenet</label>
+                  <textarea
+                    name="message"
+                    id="message"
+                    rows={4}
+                    required
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
+                    placeholder="Írja le röviden elképzeléseit..."
+                    value={formData.message}
+                    onChange={handleChange}
+                  ></textarea>
+                </div>
+
+                <div className="pt-2">
+                  <Button type="submit" size="lg" fullWidth>Ajánlatkérés küldése</Button>
+                </div>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/Dashboard.tsx

@@ -0,0 +1,313 @@
+import React, { useEffect, useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { Button } from '../components/Button';
+import { LogOut, User, Settings as SettingsIcon, CreditCard, Layout, Cake, ShieldAlert, Clock, Activity, CheckCircle, XCircle, MessageSquare, ArrowRight, Edit2, Download, FileText, ExternalLink, History, RefreshCw } from 'lucide-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../lib/supabaseClient';
+import { SettingsModal } from '../components/SettingsModal';
+import { FeedbackModal } from '../components/FeedbackModal';
+import { Invoice } from '../types';
+
+interface UserProfile {
+  id: string;
+  email: string;
+  first_name?: string;
+  last_name?: string;
+  date_of_birth: string;
+}
+
+interface OrderHistoryEntry {
+  id: string;
+  status: string;
+  changed_at: string;
+}
+
+interface UserOrder {
+  id: string;
+  created_at: string;
+  package: string;
+  status: string;
+  amount: string;
+  displayId?: string;
+  details?: any;
+  history?: OrderHistoryEntry[];
+}
+
+export const Dashboard: React.FC = () => {
+  const { user, signOut, isAdmin } = useAuth();
+  const navigate = useNavigate();
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [orders, setOrders] = useState<UserOrder[]>([]);
+  const [invoices, setInvoices] = useState<Invoice[]>([]);
+  const [loadingOrders, setLoadingOrders] = useState(true);
+  const [showSettings, setShowSettings] = useState(false);
+  
+  const [feedbackModalOpen, setFeedbackModalOpen] = useState(false);
+  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
+  const [feedbackLoading, setFeedbackLoading] = useState(false);
+
+  const fetchOrderHistory = async (orderId: string) => {
+    if (!isSupabaseConfigured) return [];
+    try {
+      const { data } = await supabase
+        .from('order_status_history')
+        .select('*')
+        .eq('order_id', orderId)
+        .order('changed_at', { ascending: false });
+      return data || [];
+    } catch (e) {
+      return [];
+    }
+  };
+
+  const fetchData = async () => {
+    if (!user) return;
+    setLoadingOrders(true);
+
+    if (!isSupabaseConfigured) {
+       const meta = user.user_metadata || {};
+       setProfile({ id: user.id, email: user.email || '', first_name: meta.first_name || '', last_name: meta.last_name || '', date_of_birth: meta.date_of_birth || '1990-01-01' });
+       setOrders([{ id: 'demo-order-1', created_at: new Date().toISOString(), package: 'Pro Web', status: 'pending_feedback', amount: '350.000 Ft', displayId: 'DEMO-123', details: { demoUrl: 'https://example.com' }, history: [{ id: 'h1', status: 'new', changed_at: new Date().toISOString() }] }]);
+       setLoadingOrders(false);
+       return;
+    }
+
+    try {
+      const { data: profileData } = await supabase.from('profiles').select('*').eq('id', user.id).maybeSingle();
+      if (profileData) setProfile(profileData);
+
+      const { data: orderData } = await supabase.from('orders').select('*').eq('user_id', user.id).order('created_at', { ascending: false });
+
+      if (orderData) {
+        const enrichedOrders = await Promise.all(orderData.map(async (o) => {
+          const history = await fetchOrderHistory(o.id);
+          return {
+            ...o,
+            displayId: o.id.substring(0, 8).toUpperCase(),
+            history: history
+          };
+        }));
+        setOrders(enrichedOrders as UserOrder[]);
+      }
+
+      const { data: invoiceData } = await supabase.from('invoices').select('*').eq('user_id', user.id).order('created_at', { ascending: false });
+      if (invoiceData) setInvoices(invoiceData as Invoice[]);
+
+    } catch (err) {
+      console.error("Unexpected error fetching data:", err);
+    } finally {
+      setLoadingOrders(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [user]);
+
+  const handleLogout = async () => {
+    await signOut();
+    navigate('/');
+  };
+
+  const openFeedbackModal = (orderId: string) => {
+    setSelectedOrderId(orderId);
+    setFeedbackModalOpen(true);
+  };
+
+  const handleSubmitFeedback = async (feedbackData: any) => {
+    if (!selectedOrderId) return;
+    setFeedbackLoading(true);
+
+    try {
+      if (!isSupabaseConfigured) {
+        await new Promise(r => setTimeout(r, 1000));
+        setOrders(prev => prev.map(o => o.id === selectedOrderId ? { ...o, status: 'in_progress' } : o));
+        setFeedbackModalOpen(false);
+        setFeedbackLoading(false);
+        return;
+      }
+
+      const { data: currentOrder } = await supabase.from('orders').select('details').eq('id', selectedOrderId).single();
+      const updatedDetails = { ...(currentOrder?.details || {}), latestFeedback: feedbackData, feedbackDate: new Date().toISOString() };
+
+      // Approved status also goes to in_progress now, admin will set to completed later
+      const { error: updateError } = await supabase.from('orders').update({ 
+        status: 'in_progress', 
+        details: updatedDetails 
+      }).eq('id', selectedOrderId);
+      
+      if (updateError) throw updateError;
+      
+      // Log history
+      await supabase.from('order_status_history').insert({ order_id: selectedOrderId, status: 'in_progress' });
+
+      await fetchData();
+      setFeedbackModalOpen(false);
+    } catch (err: any) {
+      alert("Hiba: " + err.message);
+    } finally {
+      setFeedbackLoading(false);
+    }
+  };
+
+  const getFullName = () => profile?.last_name && profile?.first_name ? `${profile.last_name} ${profile.first_name}` : user?.email?.split('@')[0] || 'Felhasználó';
+
+  const getStatusConfig = (status: string) => {
+    switch (status) {
+      case 'new': return { label: 'Beérkezett', color: 'bg-blue-100 text-blue-800', icon: Clock };
+      case 'in_progress':
+      case 'progress': return { label: 'Fejlesztés', color: 'bg-yellow-100 text-yellow-800', icon: Activity };
+      case 'pending_feedback':
+      case 'waiting_feedback':
+      case 'feedback': return { label: 'Visszajelzés', color: 'bg-purple-100 text-purple-800', icon: MessageSquare };
+      case 'completed': return { label: 'Kész', color: 'bg-green-100 text-green-800', icon: CheckCircle };
+      case 'cancelled': return { label: 'Törölve', color: 'bg-gray-100 text-gray-500', icon: XCircle };
+      default: return { label: 'Beérkezett', color: 'bg-gray-100 text-gray-800', icon: Clock };
+    }
+  };
+
+  return (
+    <div className="pt-24 bg-gray-50 min-h-screen">
+      <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} userProfile={profile} onUpdate={fetchData} />
+      <FeedbackModal isOpen={feedbackModalOpen} onClose={() => setFeedbackModalOpen(false)} onSubmit={handleSubmitFeedback} loading={feedbackLoading} />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="bg-white rounded-[24px] shadow-lg border border-gray-100 overflow-hidden mb-8">
+          <div className="bg-gradient-to-r from-gray-900 to-gray-800 p-8 text-white flex flex-col md:flex-row justify-between items-center gap-4">
+            <div>
+              <h1 className="text-3xl font-bold mb-2">Fiók Áttekintése</h1>
+              <p className="text-gray-300">Üdvözöljük, {getFullName()}!</p>
+            </div>
+            <div className="h-12 w-12 bg-white/10 rounded-full flex items-center justify-center border border-white/20">
+              <User className="h-6 w-6 text-white" />
+            </div>
+          </div>
+
+          <div className="p-8">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+               {/* ORDERS COLUMN */}
+               <div className="lg:col-span-2 space-y-6">
+                  <div className="flex justify-between items-center">
+                    <h3 className="font-bold text-gray-900 flex items-center gap-2 text-xl">
+                      <Layout className="w-5 h-5 text-primary" /> Aktív Projektjeim
+                    </h3>
+                  </div>
+
+                  {loadingOrders ? (
+                    <div className="flex justify-center py-10"><RefreshCw className="animate-spin text-primary" /></div>
+                  ) : orders.length > 0 ? (
+                    <div className="space-y-6">
+                      {orders.map(order => {
+                        const statusConfig = getStatusConfig(order.status);
+                        const needsFeedback = ['pending_feedback', 'waiting_feedback', 'feedback'].includes(order.status);
+                        
+                        return (
+                          <div key={order.id} className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
+                            <div className="p-6 flex flex-col sm:flex-row justify-between gap-6 border-b border-gray-50 bg-gray-50/30">
+                               <div>
+                                  <p className="text-xs font-black text-primary uppercase tracking-widest mb-1">{order.package}</p>
+                                  <h4 className="text-xl font-bold text-gray-900">ID: {order.displayId}</h4>
+                               </div>
+                               <div className="flex items-center gap-3">
+                                  {needsFeedback && (
+                                    <div className="flex gap-2">
+                                      <a href={order.details?.demoUrl || '#'} target="_blank" rel="noreferrer" className="text-xs px-4 py-2 rounded-xl font-black bg-blue-600 text-white flex items-center gap-2 shadow-lg shadow-blue-200">
+                                        <ExternalLink className="w-3 h-3" /> Demó oldal megnyitása
+                                      </a>
+                                      <button onClick={() => openFeedbackModal(order.id)} className="text-xs px-4 py-2 rounded-xl font-black bg-purple-100 text-purple-700 hover:bg-purple-200">
+                                        VISSZAJELZÉS
+                                      </button>
+                                    </div>
+                                  )}
+                                  {!needsFeedback && (
+                                    <span className={`text-xs px-4 py-2 rounded-xl font-black flex items-center gap-2 ${statusConfig.color}`}>
+                                      <statusConfig.icon className="w-4 h-4" /> {statusConfig.label.toUpperCase()}
+                                    </span>
+                                  )}
+                               </div>
+                            </div>
+                            
+                            {/* PROJECT TIMELINE */}
+                            <div className="p-6 bg-white">
+                               <div className="flex items-center gap-2 mb-4 text-xs font-black text-gray-400 uppercase tracking-[0.2em]">
+                                  <History className="w-3 h-3" /> Projekt Történet
+                               </div>
+                               <div className="flex flex-col gap-4 relative before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-0.5 before:bg-gray-50">
+                                  {order.history && order.history.length > 0 ? (
+                                    order.history.map((h, idx) => (
+                                      <div key={h.id} className="relative pl-6 flex justify-between items-center group">
+                                         <div className={`absolute left-0 top-1.5 w-3.5 h-3.5 rounded-full border-2 border-white shadow-sm z-10 ${idx === 0 ? 'bg-primary' : 'bg-gray-200'}`}></div>
+                                         <div className="flex flex-col">
+                                            <span className={`text-xs font-bold ${idx === 0 ? 'text-gray-900' : 'text-gray-500'}`}>
+                                               {getStatusConfig(h.status).label}
+                                            </span>
+                                            <span className="text-[10px] text-gray-400 font-medium">
+                                               {new Date(h.changed_at).toLocaleString('hu-HU')}
+                                            </span>
+                                         </div>
+                                         {idx === 0 && <span className="text-[9px] font-black text-primary bg-primary/5 px-2 py-0.5 rounded uppercase tracking-tighter">Aktuális</span>}
+                                      </div>
+                                    ))
+                                  ) : (
+                                    <p className="text-xs text-gray-400 italic pl-6">Nincs korábbi bejegyzés.</p>
+                                  )}
+                                </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <div className="bg-white p-10 rounded-3xl border-2 border-dashed border-gray-100 text-center">
+                      <p className="text-gray-400 mb-6 italic">Még nincsenek leadott rendelései.</p>
+                      <Link to="/#rendeles"><Button>Új projekt indítása <ArrowRight className="w-4 h-4 ml-2" /></Button></Link>
+                    </div>
+                  )}
+               </div>
+
+               {/* SETTINGS & INVOICES COLUMN */}
+               <div className="space-y-8">
+                  <div className="bg-white p-8 rounded-[32px] border border-gray-100 shadow-sm">
+                    <div className="flex justify-between items-center mb-6">
+                       <h3 className="font-bold text-gray-900">Beállítások</h3>
+                       <button onClick={() => setShowSettings(true)} className="p-2 hover:bg-gray-50 rounded-xl transition-colors"><SettingsIcon className="w-5 h-5 text-gray-400" /></button>
+                    </div>
+                    <div className="space-y-4">
+                       <div className="bg-gray-50 p-4 rounded-2xl">
+                          <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">E-mail</p>
+                          <p className="text-sm font-bold text-gray-900">{user?.email}</p>
+                       </div>
+                       <Button fullWidth variant="outline" size="sm" onClick={() => setShowSettings(true)}>Profil szerkesztése</Button>
+                    </div>
+                  </div>
+
+                  <div className="bg-white p-8 rounded-[32px] border border-gray-100 shadow-sm">
+                    <h3 className="font-bold text-gray-900 mb-6 flex items-center gap-2"><CreditCard className="w-5 h-5 text-primary" /> Számlák</h3>
+                    {invoices.length > 0 ? (
+                      <div className="space-y-3">
+                        {invoices.map(inv => (
+                          <div key={inv.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-xl group hover:bg-gray-100 transition-colors">
+                             <div className="flex items-center gap-3">
+                                <FileText className="w-5 h-5 text-gray-300" />
+                                <span className="text-xs font-bold text-gray-700">{inv.invoice_number}</span>
+                             </div>
+                             <button className="p-2 text-gray-400 hover:text-primary"><Download className="w-4 h-4" /></button>
+                          </div>
+                        ))}
+                      </div>
+                    ) : <p className="text-xs text-gray-400 italic text-center">Nincs számlázott tétel.</p>}
+                  </div>
+               </div>
+            </div>
+
+            <div className="border-t border-gray-100 pt-6 flex justify-end">
+              <Button variant="outline" onClick={handleLogout} className="border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 hover:border-red-300">
+                <LogOut className="w-4 h-4 mr-2" /> Kijelentkezés
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/FAQ.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, HelpCircle, ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '../components/Button';
+
+interface FaqItemProps {
+  question: string;
+  answer: string;
+}
+
+const FaqItem: React.FC<FaqItemProps> = ({ question, answer }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <div className="border border-gray-200 rounded-xl overflow-hidden transition-all duration-300 hover:border-primary/30">
+      <button 
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between p-5 bg-white text-left focus:outline-none"
+      >
+        <span className="font-semibold text-gray-900">{question}</span>
+        {isOpen ? <ChevronUp className="w-5 h-5 text-primary" /> : <ChevronDown className="w-5 h-5 text-gray-400" />}
+      </button>
+      <div className={`bg-gray-50 px-5 transition-all duration-300 ${isOpen ? 'py-5 max-h-96 opacity-100' : 'max-h-0 py-0 opacity-0 overflow-hidden'}`}>
+        <p className="text-gray-600 leading-relaxed">{answer}</p>
+      </div>
+    </div>
+  );
+};
+
+export const FAQ: React.FC = () => {
+  const navigate = useNavigate();
+
+  const faqs = [
+    {
+      question: "Mennyi idő alatt készül el egy weboldal?",
+      answer: "Ez a projekt összetettségétől függ. Egy egyszerűbb bemutatkozó oldal (Landing Page) általában 1-2 hét alatt elkészül, míg egy komplexebb webshop vagy egyedi fejlesztés 4-8 hetet is igénybe vehet. A pontos határidőt mindig az árajánlatban rögzítjük."
+    },
+    {
+      question: "Kell saját domain névvel és tárhellyel rendelkeznem?",
+      answer: "Nem feltétlenül. Ha még nincs, szívesen segítünk a beszerzésében és a beállításokban. Ha már van, akkor azokat használjuk. A 'Domain ügyintézés' és 'Tárhely ügyintézés' opciókat a megrendelésnél is kiválaszthatja."
+    },
+    {
+      question: "Vannak rejtett költségek vagy havidíjak?",
+      answer: "Nincsenek rejtett költségek. A fejlesztési díj egyszeri. Éves költségként a domain és tárhely díj merülhet fel (ha rajtunk keresztül intézi, akkor mi számlázzuk évente), illetve opcionálisan választható karbantartási csomagunk a folyamatos frissítésekért."
+    },
+    {
+      question: "Kapok számlát a szolgáltatásról?",
+      answer: "Természetesen. Minden szolgáltatásunkról hivatalos számlát állítunk ki, amelyet e-mailben küldünk el Önnek. Mivel alanyi adómentes (AAM) vállalkozás vagyunk, a számlán nem szerepel felszámított ÁFA, így a feltüntetett árak a teljes fizetendő összeget jelentik."
+    },
+    {
+      question: "Tudom majd egyedül szerkeszteni az oldalt?",
+      answer: "Igen! Olyan rendszereket építünk, amelyekhez kérés esetén adminisztrációs felületet biztosítunk (pl. blogbejegyzések írásához, termékek feltöltéséhez), és az átadáskor megmutatjuk a használatát."
+    },
+    {
+      question: "Mi történik, ha elakadok vagy hibát találok?",
+      answer: "Elakadás vagy technikai probléma esetén örömmel segítünk, kérjük, jelezze ezt felénk e-mailben. Amennyiben a hiba a mi oldalunkon merül fel, azt természetesen javítjuk. Ha azonban a probléma tőlünk független, vagy utólagos módosítást (pl. design változtatást) szeretne, abban is szívesen állunk rendelkezésére, de ezek a fejlesztések már nem ingyenesek."
+    }
+  ];
+
+  return (
+    <div className="pt-24 pb-16 min-h-screen bg-gray-50">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <Button variant="white" onClick={() => navigate(-1)} className="mb-8 shadow-sm border border-gray-200">
+          <ArrowLeft className="w-4 h-4 mr-2" /> Vissza
+        </Button>
+
+        <div className="text-center mb-12">
+           <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6 text-primary">
+              <HelpCircle className="w-8 h-8" />
+           </div>
+           <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Gyakori Kérdések</h1>
+           <p className="text-xl text-gray-600">
+             Összeszedtük a leggyakrabban felmerülő kérdéseket, hogy segítsünk a döntésben.
+           </p>
+        </div>
+
+        <div className="space-y-4">
+          {faqs.map((faq, index) => (
+            <FaqItem key={index} question={faq.question} answer={faq.answer} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

pages/Home.tsx

@@ -0,0 +1,316 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight, Monitor, Search, ExternalLink, Check, Star, Smartphone, PenTool } from 'lucide-react';
+import { Button } from '../components/Button';
+import { ServiceCard } from '../components/ServiceCard';
+import { OrderForm } from '../components/OrderForm';
+import { ProcessSection } from '../components/ProcessSection';
+import { supabase } from '../lib/supabaseClient';
+import { ProductPackage } from '../types';
+import { defaultPlans } from '../lib/defaultPlans';
+
+export const Home: React.FC = () => {
+  const [packages, setPackages] = useState<ProductPackage[]>(defaultPlans);
+
+  useEffect(() => {
+    const fetchPlans = async () => {
+      try {
+        const { data, error } = await supabase
+          .from('plans')
+          .select('*')
+          .order('price', { ascending: true }); // Simple text ordering, ideally numerical but works for default prices somewhat
+        
+        if (!error && data && data.length > 0) {
+          setPackages(data);
+        }
+      } catch (e) {
+        console.error("Error fetching plans:", e);
+      }
+    };
+    fetchPlans();
+  }, []);
+
+  return (
+    <div className="overflow-x-hidden">
+      {/* Hero Section */}
+      <section className="relative min-h-screen flex items-center justify-center pt-20 bg-gray-900 overflow-hidden">
+        {/* Background Elements */}
+        <div className="absolute inset-0 z-0">
+          <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-[#0f172a] to-purple-900"></div>
+          {/* Subtle texture overlay */}
+          <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
+          {/* Animated glow effects */}
+          <div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-purple-600/20 rounded-full blur-[100px] animate-pulse"></div>
+          <div className="absolute bottom-[-20%] right-[-10%] w-[500px] h-[500px] bg-blue-600/20 rounded-full blur-[100px] animate-pulse"></div>
+        </div>
+
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-12 text-center">
+          <div 
+            className="inline-block px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10 animate-fade-in-up mb-8" 
+            style={{ animationDelay: '0.1s' }}
+          >
+            <span className="text-blue-300 font-medium text-sm tracking-wide uppercase">Innovatív Megoldások Neked</span>
+          </div>
+
+          <h1 
+            className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white leading-tight animate-fade-in-up mb-6 tracking-tight" 
+            style={{ animationDelay: '0.2s' }}
+          >
+            Motion Web Stúdió
+          </h1>
+
+          <h2 
+            className="text-2xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 animate-fade-in-up mb-8"
+            style={{ animationDelay: '0.3s' }}
+          >
+            Vigye vállalkozását a következő szintre
+          </h2>
+          
+          <p 
+            className="text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up mb-12" 
+            style={{ animationDelay: '0.5s' }}
+          >
+            A MotionWeb csapata prémium minőségű weboldalakat és webáruházakat fejleszt, amelyek nemcsak szépek, de vevőket is hoznak.
+          </p>
+          
+          <div 
+            className="flex flex-col sm:flex-row gap-5 justify-center animate-fade-in-up" 
+            style={{ animationDelay: '0.7s' }}
+          >
+            <Link to="/#rendeles">
+              <Button size="lg" className="w-full sm:w-auto shadow-lg shadow-purple-900/20">
+                Kezdjük el <ArrowRight className="ml-2 w-5 h-5" />
+              </Button>
+            </Link>
+            <Link to="/#references">
+              <Button variant="outline" size="lg" className="border-white/20 text-white hover:bg-white/10 hover:border-white w-full sm:w-auto backdrop-blur-sm">
+                Referenciák
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Services Section */}
+      <section id="services" className="py-24 bg-gray-50 scroll-mt-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <h2 className="text-base font-semibold text-primary tracking-wide uppercase">Szolgáltatásaink</h2>
+            <p className="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
+              Minden, ami a sikeres online jelenléthez kell
+            </p>
+            <p className="mt-4 text-xl text-gray-500">
+              Teljeskörű digitális kivitelezés a tervezéstől az üzemeltetésig.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <ServiceCard 
+              title="Egyedi Weboldal"
+              description="Modern, gyors és reszponzív weboldalak, amelyek tükrözik márkája értékeit."
+              Icon={Monitor}
+            />
+            <ServiceCard 
+              title="Reszponzív Design"
+              description="Mobile-first szemléletünk garantálja, hogy oldala minden eszközön tökéletesen jelenjen meg."
+              Icon={Smartphone}
+            />
+            <ServiceCard 
+              title="SEO Optimalizálás"
+              description="Keresőoptimalizált tartalom és stratégia, hogy ügyfelei könnyen megtalálják."
+              Icon={Search}
+            />
+            <ServiceCard 
+              title="UI/UX Design"
+              description="Felhasználóbarát felületek tervezése a maximális látogatói élményért és konverzióért."
+              Icon={PenTool}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* References Section */}
+      <section id="references" className="py-24 bg-white scroll-mt-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Referenciák</h2>
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+              Tekintsd meg, milyen modern és reszponzív weboldalakat készítünk ügyfeleink számára.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {/* Card 1: SweetCraving */}
+            <div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
+              <div className="h-64 overflow-hidden">
+                <img 
+                  src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+                  alt="SweetCraving Desszertműhely" 
+                  className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" 
+                />
+              </div>
+              <div className="p-8 flex flex-col flex-grow">
+                <h3 className="text-xl font-bold text-gray-900 mb-2">SweetCraving Desszertműhely</h3>
+                <p className="text-sm text-gray-500 font-medium mb-4">Kézműves desszertek – Landing Page csomag</p>
+                <p className="text-gray-600 mb-6 flex-grow leading-relaxed">
+                  A SweetCraving számára egy fiatalos, barátságos hangulatú bemutatkozó oldalt hoztunk létre.
+                </p>
+                
+                <div className="flex items-center gap-3 mb-8">
+                  <span className="text-sm text-gray-500 mr-2">Színek:</span>
+                  <div className="w-6 h-6 rounded-full bg-pink-300 border border-gray-200"></div>
+                  <div className="w-6 h-6 rounded-full bg-yellow-200 border border-gray-200"></div>
+                  <div className="w-6 h-6 rounded-full bg-white border border-gray-200"></div>
+                </div>
+
+                <div className="w-full">
+                  <Link to="/demos/sweetcraving">
+                    <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
+                      Oldal megtekintése 
+                      <ExternalLink className="w-4 h-4 ml-2" />
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+
+            {/* Card 2: BlueWave */}
+            <div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
+              <div className="h-64 overflow-hidden">
+                <img 
+                  src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+                  alt="BlueWave Solar Kft." 
+                  className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" 
+                />
+              </div>
+              <div className="p-8 flex flex-col flex-grow">
+                <h3 className="text-xl font-bold text-gray-900 mb-2">BlueWave Solar Kft.</h3>
+                <p className="text-sm text-gray-500 font-medium mb-4">Zöld energia megoldások – Pro Web csomag</p>
+                <p className="text-gray-600 mb-6 flex-grow leading-relaxed">
+                  A BlueWave Solar számára modern, üzleti stílusú, reszponzív weboldalt készítettünk.
+                </p>
+                
+                <div className="flex items-center gap-3 mb-8">
+                  <span className="text-sm text-gray-500 mr-2">Színek:</span>
+                  <div className="w-6 h-6 rounded-full bg-sky-600 border border-gray-200"></div>
+                  <div className="w-6 h-6 rounded-full bg-green-500 border border-gray-200"></div>
+                  <div className="w-6 h-6 rounded-full bg-white border border-gray-200"></div>
+                </div>
+
+                <div className="w-full">
+                  <Link to="/demos/bluewave">
+                    <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
+                      Oldal megtekintése 
+                      <ExternalLink className="w-4 h-4 ml-2" />
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+
+            {/* Card 3: Steelguard */}
+            <div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
+              <div className="h-64 overflow-hidden">
+                <img 
+                  src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+                  alt="Steelguard Biztonságtechnika" 
+                  className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" 
+                />
+              </div>
+              <div className="p-8 flex flex-col flex-grow">
+                <h3 className="text-xl font-bold text-gray-900 mb-2">Steelguard Biztonságtechnika</h3>
+                <p className="text-sm text-gray-500 font-medium mb-4">Biztonságtechnika és IT rendszerek – Enterprise csomag</p>
+                <p className="text-gray-600 mb-6 flex-grow leading-relaxed">
+                  A Steelguard számára technológiai, sötét tónusú weboldalt készítettünk.
+                </p>
+                
+                <div className="flex items-center gap-3 mb-8">
+                  <span className="text-sm text-gray-500 mr-2">Színek:</span>
+                  <div className="w-6 h-6 rounded-full bg-black border border-gray-200"></div>
+                  <div className="w-6 h-6 rounded-full bg-blue-600 border border-gray-200"></div>
+                  <div className="w-6 h-6 rounded-full bg-gray-300 border border-gray-200"></div>
+                </div>
+
+                <div className="w-full">
+                  <Link to="/demos/steelguard">
+                    <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
+                      Oldal megtekintése 
+                      <ExternalLink className="w-4 h-4 ml-2" />
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Products/Packages Section */}
+      <section id="products" className="py-24 bg-gray-50 scroll-mt-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Csomagajánlataink</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Átlátható árazás, rejtett költségek nélkül. Válassza az Ön céljaihoz leginkább illeszkedő csomagot.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {packages.map((pkg, index) => (
+              <div 
+                key={index} 
+                className={`relative bg-white rounded-2xl shadow-xl flex flex-col p-8 transition-transform hover:-translate-y-2 duration-300 ${pkg.isPopular ? 'border-2 border-primary ring-4 ring-purple-100' : 'border border-gray-100'}`}
+              >
+                {pkg.isPopular && (
+                  <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
+                    <Star className="w-4 h-4 fill-current" /> Legnépszerűbb
+                  </div>
+                )}
+                
+                <div className="mb-6">
+                  <h3 className="text-2xl font-bold text-gray-900">{pkg.name}</h3>
+                  <p className="text-gray-500 mt-2 text-sm min-h-[40px]">{pkg.desc}</p>
+                </div>
+
+                <div className="mb-8">
+                  <span className="text-3xl font-extrabold text-gray-900">{pkg.price}</span>
+                  {pkg.price.includes('Ft') && <span className="text-gray-500 text-sm font-normal"> + ÁFA</span>}
+                </div>
+
+                <ul className="space-y-4 mb-8 flex-grow">
+                  {pkg.features.map((feature, i) => (
+                    <li key={i} className="flex items-start text-gray-600">
+                      <Check className="w-5 h-5 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
+                      <span className="text-sm">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+
+                <div className="mt-auto">
+                  <Link to="/#rendeles">
+                    <Button 
+                      variant={pkg.isPopular ? 'primary' : 'outline'} 
+                      fullWidth
+                    >
+                      {pkg.cta}
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Process Section */}
+      <ProcessSection />
+
+      {/* Order Form Section */}
+      <section id="rendeles" className="py-20 bg-white scroll-mt-20">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <OrderForm />
+        </div>
+      </section>
+    </div>
+  );
+};

pages/Privacy.tsx

@@ -0,0 +1,342 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Shield, Mail, Globe, Database, Cookie, UserCheck, Scale, Lock } from 'lucide-react';
+import { Button } from '../components/Button';
+
+export const Privacy: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="pt-24 pb-20 min-h-screen bg-gray-50/50">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <Button 
+          variant="white" 
+          onClick={() => navigate(-1)} 
+          className="mb-10 shadow-sm border border-gray-200 group"
+        >
+          <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza
+        </Button>
+
+        <div className="bg-white rounded-[32px] shadow-sm border border-gray-100 overflow-hidden">
+          {/* Header Section */}
+          <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:p-12 text-white">
+            <div className="flex flex-col md:flex-row md:items-center gap-6">
+              <div className="p-4 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 w-fit">
+                <Shield className="w-10 h-10 text-blue-300" />
+              </div>
+              <div>
+                <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight uppercase">Adatkezelési Tájékoztató</h1>
+                <div className="flex flex-wrap items-center gap-4 mt-3">
+                  <span className="px-3 py-1 bg-secondary/20 border border-secondary/30 rounded-full text-xs font-bold uppercase tracking-widest text-blue-200">
+                    MotionWeb
+                  </span>
+                  <span className="text-gray-400 text-sm">
+                    Hatályos: 2025. január 1-től
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Content Sections */}
+          <div className="p-8 md:p-16">
+            <div className="space-y-16 text-gray-600 leading-relaxed">
+              
+              {/* Section 1 */}
+              <section className="relative">
+                <div className="absolute -left-6 top-0 bottom-0 w-1 bg-secondary/10 rounded-full hidden md:block" />
+                <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">1</span>
+                  Az adatkezelő adatai
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-gray-50 p-6 rounded-2xl border border-gray-100">
+                  <div className="space-y-4">
+                    <div>
+                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Adatkezelő neve</p>
+                      <p className="font-semibold text-gray-900">Balogh Bence Benedek egyéni vállalkozó</p>
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Projekt / márkanév</p>
+                      <p className="font-semibold text-gray-900">MotionWeb</p>
+                    </div>
+                  </div>
+                  <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                      <Globe className="w-4 h-4 text-secondary mt-1 flex-shrink-0" />
+                      <div>
+                        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Weboldal</p>
+                        <a href="https://motionweb.hu" className="font-semibold text-secondary hover:underline">https://motionweb.hu</a>
+                      </div>
+                    </div>
+                    <div className="flex items-start gap-3">
+                      <Mail className="w-4 h-4 text-secondary mt-1 flex-shrink-0" />
+                      <div>
+                        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Kapcsolattartási e-mail</p>
+                        <a href="mailto:motionstudiohq@gmail.com" className="font-semibold text-secondary hover:underline">motionstudiohq@gmail.com</a>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="md:col-span-2 pt-4 border-t border-gray-200">
+                    <p className="text-sm italic text-gray-500">
+                      A MotionWeb elnevezés projektnév, nem külön jogi személy. Az adatkezelést Balogh Bence Benedek egyéni vállalkozó végzi.
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 2 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">2</span>
+                  Az adatkezelés jogalapja
+                </h3>
+                <div className="space-y-4">
+                  <p>Az adatkezelés a GDPR 6. cikk (1) bekezdése alapján történik, az alábbi jogalapokon:</p>
+                  <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    {[
+                      'szerződés teljesítése, valamint',
+                      'szerződés megkötését megelőző lépések,',
+                      'jogi kötelezettség teljesítése (számlázás),',
+                      'jogos érdek (a szolgáltatás működtetése és biztonsága),',
+                      'érintetti hozzájárulás (cookie-k alkalmazása).'
+                    ].map((item, i) => (
+                      <li key={i} className="flex items-center gap-3 text-sm bg-gray-50 p-3 rounded-lg border border-gray-100">
+                        <UserCheck className="w-4 h-4 text-secondary flex-shrink-0" />
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="bg-blue-50 p-4 rounded-xl border border-blue-100 text-gray-700 mt-4">
+                    A MotionWeb szolgáltatásai fix csomagárakon érhetők el. A megrendelés leadásával és az előleg megfizetésével a felek között szerződés jön létre.
+                  </p>
+                  <p className="font-bold text-gray-800">A MotionWeb nem végez marketing célú adatkezelést.</p>
+                </div>
+              </section>
+
+              {/* Section 3 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">3</span>
+                  Kezelt személyes adatok köre
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                  <div className="bg-gray-50 p-6 rounded-2xl border border-gray-100">
+                    <h4 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
+                      <Mail className="w-4 h-4 text-secondary" /> Kapcsolatfelvétel és rendelés
+                    </h4>
+                    <ul className="space-y-2 text-sm">
+                      {['név', 'cégnév (amennyiben megadásra kerül)', 'e-mail cím', 'telefonszám', 'számlázási adatok', 'projektleírás, megjegyzések'].map((item, i) => (
+                        <li key={i} className="flex items-center gap-2">
+                          <div className="w-1.5 h-1.5 rounded-full bg-secondary" /> {item}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <div className="bg-gray-50 p-6 rounded-2xl border border-gray-100">
+                    <h4 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
+                      <Database className="w-4 h-4 text-secondary" /> Felhasználói fiók esetén
+                    </h4>
+                    <ul className="space-y-2 text-sm">
+                      {['e-mail cím', 'jelszó (titkosított formában)', 'fiók státusz', 'rendelésekhez kapcsolódó adatok', 'technikai aktivitási adatok'].map((item, i) => (
+                        <li key={i} className="flex items-center gap-2">
+                          <div className="w-1.5 h-1.5 rounded-full bg-secondary" /> {item}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <div className="md:col-span-2 bg-blue-50/50 p-6 rounded-2xl border border-blue-100">
+                    <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                      <Shield className="w-4 h-4 text-secondary" /> Fizetés
+                    </h4>
+                    <p className="text-sm">
+                      A MotionWeb nem kezel bankkártya-adatokat. A fizetés a <span className="font-bold">Stripe</span> rendszerén keresztül történik, amelyhez az érintett átirányításra kerül.
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 4 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">4</span>
+                  Adattárolás és adatfeldolgozók
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div className="space-y-4">
+                    <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest">Adattárolás helye</h4>
+                    <ul className="text-sm space-y-2">
+                      <li><strong>Supabase</strong> – adatbázis és felhasználói adatok (EU)</li>
+                      <li><strong>VPS szerver</strong> – weboldalak kiszolgálása (EU)</li>
+                    </ul>
+                  </div>
+                  <div className="space-y-4">
+                    <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest">E-mail küldés</h4>
+                    <ul className="text-sm space-y-2">
+                      <li><strong>Resend</strong> – tranzakciós e-mailek</li>
+                      <li><strong>Supabase</strong> – fiókregisztráció és jelszó-visszaállítás</li>
+                    </ul>
+                  </div>
+                  <div className="space-y-4">
+                    <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest">Fizetési szolgáltató</h4>
+                    <ul className="text-sm space-y-2">
+                      <li><strong>Stripe Payments Europe Ltd.</strong></li>
+                    </ul>
+                  </div>
+                </div>
+                <p className="mt-8 text-sm italic border-t border-gray-100 pt-4">
+                  Az adatfeldolgozók kiválasztása során az adatkezelő kizárólag a GDPR-nak megfelelő szolgáltatókat veszi igénybe.
+                </p>
+              </section>
+
+              {/* Section 5 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">5</span>
+                  Analitikai adatok
+                </h3>
+                <div className="space-y-4">
+                  <p>A MotionWeb kizárólag alapvető statisztikai adatokat gyűjt Supabase segítségével, így különösen:</p>
+                  <ul className="flex flex-wrap gap-3">
+                    {['weboldal-látogatások száma', 'regisztrált felhasználók száma', 'leadott rendelések száma'].map((item, i) => (
+                      <li key={i} className="bg-gray-50 px-4 py-2 rounded-full border border-gray-200 text-sm font-medium">
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="text-sm text-gray-500">Az analitikai adatok nem alkalmasak az érintettek azonosítására, és nem szolgálnak marketing vagy profilalkotási célokat.</p>
+                </div>
+              </section>
+
+              {/* Section 6 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">6</span>
+                  Cookie-k (sütik)
+                </h3>
+                <div className="flex flex-col md:flex-row gap-8 items-start">
+                  <div className="bg-gray-50 p-4 rounded-2xl text-secondary">
+                    <Cookie className="w-12 h-12" />
+                  </div>
+                  <div className="space-y-4">
+                    <p>A weboldal cookie-kat alkalmaz a megfelelő működés, a felhasználói élmény és a biztonság érdekében.</p>
+                    <p>A cookie-k használatához az érintett hozzájárulása szükséges, amelyet a weboldalon megjelenő cookie banner biztosít.</p>
+                    <p className="font-semibold text-gray-900">Marketing célú cookie-k alkalmazására nem kerül sor.</p>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 7 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">7</span>
+                  Adatmegőrzés időtartama
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {[
+                    { label: 'aktív ügyféladatok', val: 'a szolgáltatás fennállásának ideje alatt' },
+                    { label: 'szerződés megszűnését követően', val: '1 évig' },
+                    { label: 'számlázási adatok', val: 'jogszabályi kötelezettség szerint' },
+                    { label: 'felhasználói fiókadatok', val: 'határozatlan ideig, vagy az érintett törlési kérelméig' }
+                  ].map((item, i) => (
+                    <div key={i} className="p-4 bg-gray-50 rounded-xl border border-gray-100">
+                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">{item.label}</p>
+                      <p className="font-semibold text-gray-900 text-sm">{item.val}</p>
+                    </div>
+                  ))}
+                </div>
+              </section>
+
+              {/* Section 8 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">8</span>
+                  Az érintettek jogai
+                </h3>
+                <div className="space-y-4">
+                  <p>Az érintett jogosult:</p>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-2">
+                    {[
+                      'tájékoztatást kérni személyes adatai kezeléséről',
+                      'hozzáférést kérni a kezelt adatokhoz',
+                      'adatainak helyesbítését kérni',
+                      'adatainak törlését kérni',
+                      'az adatkezelés korlátozását kérni',
+                      'tiltakozni az adatkezelés ellen',
+                      'adathordozhatóságot kérni'
+                    ].map((item, i) => (
+                      <div key={i} className="flex items-center gap-3 text-sm">
+                        <div className="w-1.5 h-1.5 rounded-full bg-secondary" />
+                        {item}
+                      </div>
+                    ))}
+                  </div>
+                  <p className="mt-8 p-6 bg-gray-900 text-white rounded-2xl text-center">
+                    A kérelmek benyújthatók az alábbi e-mail címen:<br />
+                    <a href="mailto:motionstudiohq@gmail.com" className="text-blue-300 font-bold hover:underline">motionstudiohq@gmail.com</a>
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 9 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">9</span>
+                  Jogorvoslati lehetőségek
+                </h3>
+                <div className="bg-gray-50 p-6 rounded-2xl border border-gray-100 flex items-start gap-4">
+                  <div className="p-3 bg-white rounded-xl shadow-sm">
+                    <Scale className="w-6 h-6 text-secondary" />
+                  </div>
+                  <div>
+                    <p className="mb-4">Amennyiben az érintett megítélése szerint személyes adatainak kezelése jogsértő, jogosult panaszt tenni:</p>
+                    <p className="font-bold text-gray-900">Nemzeti Adatvédelmi és Információszabadság Hatóság (NAIH)</p>
+                    <p className="text-sm">Weboldal: <a href="https://www.naih.hu" className="text-secondary hover:underline">https://www.naih.hu</a></p>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 10 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">10</span>
+                  Adatbiztonság
+                </h3>
+                <div className="flex gap-6 items-center">
+                  <div className="hidden md:block p-8 bg-gray-900 rounded-3xl text-white">
+                    <Lock className="w-12 h-12 text-secondary" />
+                  </div>
+                  <p>
+                    Az adatkezelő megfelelő technikai és szervezési intézkedéseket alkalmaz a személyes adatok biztonságának megőrzése érdekében, különös tekintettel a jogosulatlan hozzáférés, módosítás vagy törlés megelőzésére.
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 11 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">11</span>
+                  Záró rendelkezések
+                </h3>
+                <div className="space-y-4">
+                  <p>Az adatkezelő fenntartja a jogot jelen adatkezelési tájékoztató módosítására.</p>
+                  <p className="text-secondary font-bold">A módosítás a weboldalon történő közzététellel lép hatályba.</p>
+                </div>
+              </section>
+
+            </div>
+          </div>
+
+          {/* Footer Info */}
+          <div className="bg-gray-50 p-8 border-t border-gray-100 text-center">
+             <p className="text-gray-400 text-xs italic">
+              Utolsó frissítés: 2025. január
+            </p>
+            <p className="text-gray-400 text-xs mt-2">
+              MotionWeb © {new Date().getFullYear()} - Minden jog fenntartva.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/Products.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { Check, Star } from 'lucide-react';
+import { Button } from '../components/Button';
+import { Link } from 'react-router-dom';
+import { supabase } from '../lib/supabaseClient';
+import { ProductPackage } from '../types';
+import { defaultPlans } from '../lib/defaultPlans';
+
+export const Products: React.FC = () => {
+  const [packages, setPackages] = useState<ProductPackage[]>(defaultPlans);
+
+  useEffect(() => {
+    const fetchPlans = async () => {
+      try {
+        const { data, error } = await supabase
+          .from('plans')
+          .select('*')
+          .order('price', { ascending: true });
+        
+        if (!error && data && data.length > 0) {
+          setPackages(data);
+        }
+      } catch (e) {
+        console.error("Error fetching plans:", e);
+      }
+    };
+    fetchPlans();
+  }, []);
+
+  return (
+    <div className="pt-20 bg-gray-50 min-h-screen">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Csomagajánlataink</h1>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Átlátható árazás, rejtett költségek nélkül. Válassza az Ön céljaihoz leginkább illeszkedő csomagot.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {packages.map((pkg, index) => (
+            <div 
+              key={index} 
+              className={`relative bg-white rounded-2xl shadow-xl flex flex-col p-8 transition-transform hover:-translate-y-2 duration-300 ${pkg.isPopular ? 'border-2 border-primary ring-4 ring-purple-100' : 'border border-gray-100'}`}
+            >
+              {pkg.isPopular && (
+                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
+                  <Star className="w-4 h-4 fill-current" /> Legnépszerűbb
+                </div>
+              )}
+              
+              <div className="mb-6">
+                <h3 className="text-2xl font-bold text-gray-900">{pkg.name}</h3>
+                <p className="text-gray-500 mt-2 text-sm min-h-[40px]">{pkg.desc}</p>
+              </div>
+
+              <div className="mb-8">
+                <span className="text-3xl font-extrabold text-gray-900">{pkg.price}</span>
+                {pkg.price.includes('Ft') && <span className="text-gray-500 text-sm font-normal"> + ÁFA</span>}
+              </div>
+
+              <ul className="space-y-4 mb-8 flex-grow">
+                {pkg.features.map((feature, i) => (
+                  <li key={i} className="flex items-start text-gray-600">
+                    <Check className="w-5 h-5 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
+                    <span className="text-sm">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-auto">
+                <Link to="/contact">
+                  <Button 
+                    variant={pkg.isPopular ? 'primary' : 'outline'} 
+                    fullWidth
+                  >
+                    {pkg.cta}
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-20 bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100 flex flex-col md:flex-row items-center justify-between gap-8">
+          <div>
+            <h3 className="text-2xl font-bold text-gray-900 mb-2">Egyedi igényei vannak?</h3>
+            <p className="text-gray-600">
+              Nem találja a megfelelő csomagot? Készítünk Önnek egy teljesen személyre szabott ajánlatot.
+            </p>
+          </div>
+          <Link to="/contact">
+            <Button size="lg">Kapcsolatfelvétel</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/References.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ExternalLink } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export const References: React.FC = () => {
+  // Demo projects that now have real pages
+  const projects = [
+    {
+      id: 1,
+      title: "SweetCraving Desszertműhely",
+      category: "Landing Page",
+      image: "https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1073&q=80",
+      description: "Fiatalos, kézműves desszertműhely bemutatkozó oldala.",
+      link: "/demos/sweetcraving"
+    },
+    {
+      id: 2,
+      title: "BlueWave Solar Kft.",
+      category: "Pro Web + Aloldalak",
+      image: "https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=1074&q=80",
+      description: "Megújuló energiaforrások vállalati weboldala kalkulátorral.",
+      link: "/demos/bluewave"
+    },
+    {
+      id: 3,
+      title: "Steelguard Biztonságtechnika",
+      category: "Enterprise Rendszer",
+      image: "https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80",
+      description: "High-tech biztonságtechnikai portál és ügyfélkapu.",
+      link: "/demos/steelguard"
+    },
+    {
+      id: 4,
+      title: "EcoHome Ingatlan",
+      category: "Ingatlan weboldal",
+      image: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1073&q=80",
+      description: "Modern ingatlanértékesítő platform kereső funkcióval.",
+      link: null
+    },
+    {
+      id: 5,
+      title: "Glamour Beauty",
+      category: "Webshop",
+      image: "https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80",
+      description: "Kozmetikai webáruház bankkártyás fizetéssel.",
+      link: null
+    },
+    {
+      id: 6,
+      title: "Law Firm",
+      category: "Bemutatkozó oldal",
+      image: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?ixlib=rb-4.0.3&auto=format&fit=crop&w=1212&q=80",
+      description: "Ügyvédi iroda letisztult, bizalomépítő oldala.",
+      link: null
+    }
+  ];
+
+  return (
+    <div className="pt-20 bg-white min-h-screen">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Referenciáink</h1>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Büszkék vagyunk rá, hogy ügyfeleink álmait digitális valósággá formálhatjuk. Nézze meg korábbi munkáinkat!
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {projects.map((project) => (
+            <div key={project.id} className="group relative overflow-hidden rounded-2xl shadow-lg cursor-pointer bg-gray-900">
+              <img 
+                src={project.image} 
+                alt={project.title} 
+                className="w-full h-72 object-cover transform group-hover:scale-110 transition-transform duration-500 opacity-90 group-hover:opacity-60"
+              />
+              
+              <div className="absolute inset-0 flex flex-col justify-end p-6 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent">
+                <span className="text-primary font-medium text-sm mb-1">{project.category}</span>
+                <h3 className="text-white text-2xl font-bold mb-2">{project.title}</h3>
+                <p className="text-gray-300 text-sm mb-4 line-clamp-2">{project.description}</p>
+                
+                {project.link ? (
+                  <Link to={project.link} className="flex items-center text-white font-semibold hover:text-primary transition-colors">
+                    Megtekintés <ExternalLink className="ml-2 w-4 h-4" />
+                  </Link>
+                ) : (
+                  <span className="text-gray-500 text-sm italic">Hamarosan elérhető</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 p-4 bg-purple-50 rounded-lg text-center text-gray-600 border border-purple-100">
+          <p className="italic">
+            "A képek illusztrációk. A valódi referenciamunkákat az ügyfél kérésére e-mailben küldött portfólió tartalmazza."
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/SUPABASE_SETUP.sql

@@ -0,0 +1 @@
+鏸n槨bｱ$掛ｨｺｴｮ･ｦﾚｱ苣,Gbｶ<EFBFBD>

pages/Services.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Monitor, Smartphone, Search, PenTool, Database, Server } from 'lucide-react';
+import { Button } from '../components/Button';
+import { Link } from 'react-router-dom';
+
+export const Services: React.FC = () => {
+  const services = [
+    {
+      icon: Monitor,
+      title: "Egyedi Webfejlesztés",
+      desc: "Nem sablonmegoldásokat kínálunk. Minden weboldalt a nulláról, az Ön igényeire szabva fejlesztünk React és modern technológiák használatával. Gyors, biztonságos és skálázható."
+    },
+    {
+      icon: Smartphone,
+      title: "Reszponzív Design",
+      desc: "Mobile-first szemléletünk garantálja, hogy oldala minden eszközön – telefonon, tableten és asztali gépen – tökéletesen jelenjen meg és működjön."
+    },
+    {
+      icon: Search,
+      title: "SEO Optimalizálás",
+      desc: "A Google találati lista élére segítjük. Technikai SEO, kulcsszókutatás és tartalomoptimalizálás, hogy a potenciális ügyfelek Önre találjanak."
+    },
+    {
+      icon: PenTool,
+      title: "UI/UX Design",
+      desc: "Felhasználóbarát felületek tervezése. A látogatói élmény (UX) maximalizálása növeli a konverziót és a vásárlási hajlandóságot."
+    },
+    {
+      icon: Database,
+      title: "Webshop Rendszerek",
+      desc: "Teljeskörű e-kereskedelmi megoldások. Termékkezelés, raktárkészlet, automatikus számlázás és bankkártyás fizetés integrációja."
+    },
+    {
+      icon: Server,
+      title: "Hoszting & Domain",
+      desc: "Segítünk a megfelelő domain név kiválasztásában és a gyors, megbízható tárhely beállításában. Teljeskörű üzemeltetést is vállalunk."
+    }
+  ];
+
+  return (
+    <div className="pt-20">
+      <div className="bg-gray-50 py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Szolgáltatásaink</h1>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            A Motion Web Stúdió a digitális megoldások széles spektrumát kínálja, hogy vállalkozása sikeres legyen az online térben.
+          </p>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+          {services.map((service, index) => (
+            <div key={index} className="flex flex-col h-full bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100">
+              <div className="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
+                <service.icon className="w-7 h-7 text-primary" />
+              </div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h3>
+              <p className="text-gray-600 leading-relaxed flex-grow">
+                {service.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Process Section */}
+      <section className="bg-gray-900 py-20 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-bold text-center mb-16">A Munkafolyamatunk</h2>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            {[
+              { step: "01", title: "Konzultáció", desc: "Felmérjük igényeit és céljait." },
+              { step: "02", title: "Tervezés", desc: "Drótvázak és design tervek készítése." },
+              { step: "03", title: "Fejlesztés", desc: "Programozás és tartalomfeltöltés." },
+              { step: "04", title: "Átadás", desc: "Tesztelés, élesítés és oktatás." }
+            ].map((item, i) => (
+              <div key={i} className="relative">
+                <div className="text-6xl font-black text-gray-800 absolute -top-8 -left-4 z-0 opacity-50">{item.step}</div>
+                <div className="relative z-10">
+                  <h3 className="text-xl font-bold text-primary mb-2">{item.title}</h3>
+                  <p className="text-gray-400">{item.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-16 text-center">
+            <Link to="/contact">
+              <Button size="lg">Kezdjük el a közös munkát</Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};

pages/Terms.tsx

@@ -0,0 +1,320 @@
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+// Add XCircle to the import list
+import { ArrowLeft, FileText, Globe, Mail, Shield, XCircle } from 'lucide-react';
+import { Button } from '../components/Button';
+
+export const Terms: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="pt-24 pb-20 min-h-screen bg-gray-50/50">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <Button 
+          variant="white" 
+          onClick={() => navigate(-1)} 
+          className="mb-10 shadow-sm border border-gray-200 group"
+        >
+          <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza
+        </Button>
+
+        <div className="bg-white rounded-[32px] shadow-sm border border-gray-100 overflow-hidden">
+          {/* Header Section */}
+          <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:p-12 text-white">
+            <div className="flex flex-col md:flex-row md:items-center gap-6">
+              <div className="p-4 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 w-fit">
+                <FileText className="w-10 h-10 text-purple-300" />
+              </div>
+              <div>
+                <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight uppercase">Általános Szerződési Feltételek</h1>
+                <div className="flex flex-wrap items-center gap-4 mt-3">
+                  <span className="px-3 py-1 bg-primary/20 border border-primary/30 rounded-full text-xs font-bold uppercase tracking-widest text-purple-200">
+                    MotionWeb
+                  </span>
+                  <span className="text-gray-400 text-sm">
+                    Hatályos: 2025. január 1-től
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Content Sections */}
+          <div className="p-8 md:p-16">
+            <div className="space-y-16 text-gray-600 leading-relaxed">
+              
+              {/* Section 1 */}
+              <section className="relative">
+                <div className="absolute -left-6 top-0 bottom-0 w-1 bg-primary/10 rounded-full hidden md:block" />
+                <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">1</span>
+                  A szolgáltató adatai
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-gray-50 p-6 rounded-2xl border border-gray-100">
+                  <div className="space-y-4">
+                    <div>
+                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Szolgáltató neve</p>
+                      <p className="font-semibold text-gray-900">Balogh Bence Benedek egyéni vállalkozó</p>
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Projekt / márkanév</p>
+                      <p className="font-semibold text-gray-900">MotionWeb</p>
+                    </div>
+                  </div>
+                  <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                      <Globe className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
+                      <div>
+                        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Weboldal</p>
+                        <a href="https://motionweb.hu" className="font-semibold text-primary hover:underline">https://motionweb.hu</a>
+                      </div>
+                    </div>
+                    <div className="flex items-start gap-3">
+                      <Mail className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
+                      <div>
+                        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Kapcsolattartási e-mail</p>
+                        <a href="mailto:motionstudiohq@gmail.com" className="font-semibold text-primary hover:underline">motionstudiohq@gmail.com</a>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="md:col-span-2 pt-4 border-t border-gray-200">
+                    <p className="text-sm italic text-gray-500">
+                      A MotionWeb elnevezés projektnév, nem önálló jogi személy. A szolgáltatásokat Balogh Bence Benedek egyéni vállalkozó nyújtja.
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 2 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">2</span>
+                  Az ÁSZF hatálya
+                </h3>
+                <div className="space-y-4">
+                  <p>Jelen Általános Szerződési Feltételek (ÁSZF) a MotionWeb weboldalon keresztül megrendelt valamennyi szolgáltatásra vonatkoznak.</p>
+                  <p className="bg-purple-50 p-4 rounded-xl border border-purple-100 text-gray-700">
+                    A megrendelő a rendelés leadásával és az előleg megfizetésével jelen ÁSZF rendelkezéseit elfogadja, és a felek között szerződés jön létre.
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 3 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">3</span>
+                  A szolgáltatás jellege
+                </h3>
+                <div className="space-y-4">
+                  <p>A MotionWeb fix csomagárakon kínál weboldalkészítési szolgáltatásokat.</p>
+                  <p>A szolgáltatás digitális szolgáltatásnak minősül, amely egy bemutató (demó) weboldal elkészítésével kezdődik, majd a megrendelő jóváhagyása esetén a végleges weboldal fejlesztésével folytatódik.</p>
+                  <p className="font-bold text-gray-800">A MotionWeb nem nyújt egyedi ajánlattételt.</p>
+                </div>
+              </section>
+
+              {/* Section 4 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">4</span>
+                  Szerződés létrejötte
+                </h3>
+                <p className="mb-4">A szerződés az alábbi lépések teljesülésével jön létre:</p>
+                <ul className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  {['a megrendelő kiválasztja a szolgáltatási csomagot,', 'kitölti a rendelési űrlapot,', 'megfizeti az előleget.'].map((step, i) => (
+                    <li key={i} className="bg-gray-50 p-4 rounded-xl border border-gray-100 text-sm font-medium flex items-center gap-3">
+                      <span className="w-5 h-5 rounded-full bg-white border border-gray-200 flex items-center justify-center text-[10px] text-gray-400">{i+1}</span>
+                      {step}
+                    </li>
+                  ))}
+                </ul>
+                <p className="mt-4 text-primary font-semibold">A szerződés létrejöttével a MotionWeb megkezdi a demó weboldal elkészítését.</p>
+              </section>
+
+              {/* Section 5 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">5</span>
+                  Előleg
+                </h3>
+                <div className="space-y-4">
+                  <p>Az előleg a szolgáltatás megkezdésének feltétele.</p>
+                  <p className="font-bold text-red-600 underline decoration-red-200 underline-offset-4">Az előleg nem visszatérítendő, mivel az a demó weboldal elkészítéséhez kapcsolódó munkavégzést és ráfordítást fedezi.</p>
+                  <p>Amennyiben a megrendelő a demó weboldalt nem kívánja jóváhagyni, a fennmaradó díjat nem köteles megfizetni, azonban az előleg visszatérítésére ilyen esetben sem jogosult.</p>
+                </div>
+              </section>
+
+              {/* Section 6 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">6</span>
+                  Demó weboldal és visszajelzés
+                </h3>
+                <div className="space-y-4">
+                  <p>A MotionWeb a demó weboldal elkészültéről a megrendelőt e-mailben értesíti.</p>
+                  <p>A megrendelő a demó weboldalt a motionweb.hu oldalon, bejelentkezést követően, a „Rendeléseim” menüpont alatt tekintheti meg és adhat visszajelzést.</p>
+                  <p className="font-bold text-gray-800">A demó weboldal visszajelzésére összesen 1 hónap áll rendelkezésre.</p>
+                  <p>A MotionWeb a visszajelzés hiánya esetén:</p>
+                  <div className="flex flex-wrap gap-2">
+                    {['az elkészülést követően,', '1 hét elteltével,', '2 hét elteltével'].map((time, i) => (
+                      <span key={i} className="px-3 py-1 bg-gray-100 rounded-full text-xs font-medium text-gray-600">{time}</span>
+                    ))}
+                  </div>
+                  <p>emlékeztető e-mailt küld.</p>
+                  <p className="bg-gray-900 text-gray-300 p-6 rounded-2xl text-sm italic">
+                    Amennyiben a visszajelzési határidő eredménytelenül telik el, a MotionWeb a projektet kommunikáció hiányában lezártnak tekinti, és a projektfájlokat e-mailben megküldi.
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 7 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">7</span>
+                  Módosítási körök
+                </h3>
+                <div className="space-y-4">
+                  <p>A csomagár legfeljebb <span className="font-bold text-gray-900">két (2) módosítási kört</span> tartalmaz.</p>
+                  <p>Amennyiben a két módosítási kör után a demó weboldal nem kerül jóváhagyásra, a MotionWeb jogosult a projektet lezárni.</p>
+                </div>
+              </section>
+
+              {/* Section 8 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">8</span>
+                  Jóváhagyás és végfizetés
+                </h3>
+                <div className="space-y-4">
+                  <p>A demó weboldal jóváhagyását követően a megrendelő köteles megfizetni a fennmaradó díjat.</p>
+                  <p className="font-semibold text-gray-800">A végfizetés beérkezését követően a MotionWeb megkezdi a weboldal végleges, funkciókkal ellátott verziójának fejlesztését és élesítését.</p>
+                  <p>A végfizetés elmaradása esetén a végleges weboldal fejlesztése és élesítése nem történik meg.</p>
+                </div>
+              </section>
+
+              {/* Section 9 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">9</span>
+                  Határidők
+                </h3>
+                <div className="space-y-4">
+                  <p>A MotionWeb nem vállal konkrét teljesítési határidőt.</p>
+                  <p>A weboldalon vagy kommunikáció során feltüntetett időtartamok kizárólag tájékoztató jellegű becslések.</p>
+                  <p className="text-sm border-l-4 border-amber-400 pl-4 py-1 text-gray-500">
+                    A megrendelő tudomásul veszi, hogy határidő túllépésből eredő igényt nem érvényesíthet.
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 10 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">10</span>
+                  Admin felület és utólagos módosítások
+                </h3>
+                <div className="space-y-4">
+                  <p>Az admin felület kizárólag azokat a funkciókat tartalmazza, amelyek a megrendelés során előzetesen egyeztetésre kerültek.</p>
+                  <p>A megrendelő kizárólag az admin felületen elérhető funkciók körében jogosult önálló módosításokra.</p>
+                  <p>Egyszerű, technikailag nem összetett kérések (például szövegcsere) esetén a megrendelő e-mailben jelezheti igényét, amelynek teljesítésében a MotionWeb eseti alapon segítséget nyújthat.</p>
+                  <p className="font-bold text-gray-800 border-t border-gray-100 pt-4">Dizájnmódosítás, új funkció, új aloldal vagy admin bővítés külön megrendelésnek minősül.</p>
+                  <p>A külön megrendelések egyedi árazás alapján, előzetes befizetést követően valósulnak meg.</p>
+                  <p className="italic">A MotionWeb nem nyújt folyamatos technikai támogatási vagy karbantartási szolgáltatást.</p>
+                </div>
+              </section>
+
+              {/* Section 11 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">11</span>
+                  Tulajdonjog és referenciahasználat
+                </h3>
+                <div className="space-y-4">
+                  <p>A weboldal forráskódja és tartalma a teljes díj megfizetéséig a MotionWeb tulajdonában marad.</p>
+                  <p>A végfizetést követően a megrendelő jogosult a weboldalt használni.</p>
+                  <p>A MotionWeb jogosult az elkészült weboldalt referenciaként, anonim módon, a megrendelő nevének feltüntetése nélkül bemutatni.</p>
+                </div>
+              </section>
+
+              {/* Section 12 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">12</span>
+                  Felelősségkorlátozás
+                </h3>
+                <div className="space-y-4">
+                  <p>A MotionWeb nem vállal felelősséget:</p>
+                  <ul className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {['elmaradt haszonért,', 'közvetett károkért,', 'üzleti veszteségekért.'].map((item, i) => (
+                      <li key={i} className="bg-red-50/50 p-4 rounded-xl border border-red-100 text-sm font-semibold text-red-700 flex items-center gap-2">
+                        <XCircle className="w-4 h-4" /> {item}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="font-bold text-gray-800">A szolgáltatás nem garantál üzleti eredményt.</p>
+                </div>
+              </section>
+
+              {/* Section 13 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">13</span>
+                  Elállási jog kizárása
+                </h3>
+                <div className="space-y-4">
+                  <p>A szolgáltatás digitális szolgáltatásnek minősül.</p>
+                  <p className="font-bold text-gray-800">A megrendelő a rendelés leadásával és az előleg megfizetésével kifejezetten tudomásul veszi, hogy a teljesítés megkezdésével elállási joga megszűnik.</p>
+                </div>
+              </section>
+
+              {/* Section 14 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">14</span>
+                  Ügyfélkör
+                </h3>
+                <p>A MotionWeb szolgáltatásait magánszemélyek és vállalkozások egyaránt igénybe vehetik.</p>
+              </section>
+
+              {/* Section 15 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">15</span>
+                  Jogvita és irányadó jog
+                </h3>
+                <div className="space-y-4">
+                  <p>Jelen ÁSZF-re a magyar jog az irányadó.</p>
+                  <p>Jogvita esetén a szolgáltató székhelye szerinti bíróság rendelkezik illetékességgel.</p>
+                </div>
+              </section>
+
+              {/* Section 16 */}
+              <section>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">16</span>
+                  Záró rendelkezések
+                </h3>
+                <div className="space-y-4">
+                  <p>A MotionWeb fenntartja a jogot jelen ÁSZF módosítására.</p>
+                  <p className="text-primary font-bold">A módosítás a weboldalon történő közzététellel lép hatályba.</p>
+                </div>
+              </section>
+
+            </div>
+          </div>
+
+          {/* Footer Info */}
+          <div className="bg-gray-50 p-8 border-t border-gray-100 text-center">
+            <div className="flex items-center justify-center gap-2 text-gray-400 text-sm font-medium mb-4">
+              <Shield className="w-4 h-4" />
+              <span>Biztonságos Adatkezelés & Jogi Megfelelőség</span>
+            </div>
+            <p className="text-gray-400 text-xs italic">
+              MotionWeb © {new Date().getFullYear()} - Minden jog fenntartva.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/auth/ForgotPassword.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
+import { Button } from '../../components/Button';
+import { Mail, ArrowLeft, AlertCircle, CheckCircle, RefreshCw, Send } from 'lucide-react';
+
+export const ForgotPassword: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      if (!isSupabaseConfigured) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        setSuccess(true);
+        return;
+      }
+
+      const redirectUrl = `${window.location.origin}/#/auth/reset-password`;
+
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: redirectUrl,
+      });
+
+      if (error) {
+        setError(error.message);
+      } else {
+        setSuccess(true);
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight">Jelszó visszaállítása</h2>
+          <p className="mt-2 text-sm text-gray-600 font-medium">Küldünk egy linket a jelszava megváltoztatásához.</p>
+        </div>
+
+        <div className="bg-white py-10 px-6 md:px-10 shadow-xl rounded-[32px] border border-gray-100">
+          {success ? (
+            <div className="text-center animate-fade-in">
+              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                <CheckCircle className="w-8 h-8 text-green-600" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 mb-2">E-mail elküldve!</h3>
+              <p className="text-gray-600 mb-8 text-sm leading-relaxed">
+                Ellenőrizze a(z) <strong>{email}</strong> postaládáját a visszaállításhoz szükséges linkért.
+              </p>
+              <Link to="/auth/login" className="block">
+                <Button fullWidth>Vissza a bejelentkezéshez</Button>
+              </Link>
+            </div>
+          ) : (
+            <form className="space-y-6" onSubmit={handleSubmit}>
+              {error && (
+                <div className="rounded-xl bg-red-50 p-4 border border-red-100 flex items-start animate-fade-in">
+                  <AlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
+                  <p className="ml-3 text-sm font-medium text-red-800">{error}</p>
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="email" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">E-mail cím</label>
+                <div className="relative">
+                   <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-300" />
+                   <input
+                    id="email"
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="appearance-none block w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium"
+                    placeholder="pelda@email.hu"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
+                  {loading ? (
+                    <RefreshCw className="w-5 h-5 animate-spin" />
+                  ) : (
+                    <>Link küldése <Send className="ml-2 w-4 h-4" /></>
+                  )}
+                </Button>
+              </div>
+
+              <div className="text-center pt-2">
+                <Link to="/auth/login" className="text-sm font-bold text-gray-400 hover:text-primary transition-colors flex items-center justify-center group">
+                  <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza a bejelentkezéshez
+                </Link>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

pages/auth/Login.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
+import { Button } from '../../components/Button';
+import { useAuth } from '../../context/AuthContext';
+import { LogIn, AlertCircle, ArrowLeft, RefreshCw, Mail, ShieldCheck } from 'lucide-react';
+
+export const Login: React.FC = () => {
+  const navigate = useNavigate();
+  const { refreshDemoUser } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [needsConfirmation, setNeedsConfirmation] = useState(false);
+  const [resendLoading, setResendLoading] = useState(false);
+  const [resendSuccess, setResendSuccess] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setNeedsConfirmation(false);
+
+    try {
+      if (!isSupabaseConfigured) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const demoUser = {
+          user: {
+            id: 'demo-user-123',
+            email: email,
+            user_metadata: { date_of_birth: '1990-01-01' }
+          },
+          access_token: 'demo-token',
+        };
+        localStorage.setItem('demo_user_session', JSON.stringify(demoUser));
+        refreshDemoUser();
+        navigate('/dashboard');
+        return;
+      }
+
+      const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+
+      if (error) {
+        console.error('Login error:', error);
+        if (error.message.includes('Invalid login credentials')) {
+          setError('Helytelen e-mail cím vagy jelszó. Kérjük, győződjön meg róla, hogy megerősítette az e-mail címét!');
+          setNeedsConfirmation(true);
+        } else if (error.message.includes('Email not confirmed')) {
+          setError('Az e-mail cím még nincs megerősítve.');
+          setNeedsConfirmation(true);
+        } else {
+          setError('Hiba történt a bejelentkezés során: ' + error.message);
+        }
+      } else {
+        navigate('/dashboard');
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResendConfirmation = async () => {
+    if (!email) {
+      setError('Kérjük, először adja meg az e-mail címét!');
+      return;
+    }
+    setResendLoading(true);
+    setResendSuccess(false);
+    setError(null);
+
+    try {
+      const redirectUrl = `${window.location.origin}/#/auth/login`;
+      const { error } = await supabase.auth.resend({
+        type: 'signup',
+        email: email,
+        options: { emailRedirectTo: redirectUrl }
+      });
+
+      if (error) {
+        setError('Hiba az újraküldéskor: ' + error.message);
+      } else {
+        setResendSuccess(true);
+      }
+    } catch (err: any) {
+      setError('Hiba történt.');
+    } finally {
+      setResendLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-extrabold text-gray-900">Bejelentkezés</h2>
+          <p className="mt-2 text-sm text-gray-600 font-medium">Jelentkezzen be fiókjába a folytatáshoz.</p>
+        </div>
+
+        <div className="bg-white py-8 px-4 shadow-xl rounded-[24px] sm:px-10 border border-gray-100">
+          <form className="space-y-6" onSubmit={handleLogin}>
+            {error && (
+              <div className="rounded-lg bg-red-50 p-4 border border-red-100 flex flex-col items-start">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0"><AlertCircle className="h-5 w-5 text-red-400" /></div>
+                  <div className="ml-3"><h3 className="text-sm font-medium text-red-800">{error}</h3></div>
+                </div>
+                {needsConfirmation && (
+                  <div className="mt-4 w-full p-4 bg-white/80 rounded-xl border border-red-200">
+                    <button type="button" onClick={handleResendConfirmation} disabled={resendLoading} className="text-xs font-bold text-primary hover:text-primary-dark underline flex items-center">
+                      {resendLoading ? <RefreshCw className="w-3 h-3 animate-spin mr-1" /> : <Mail className="w-3 h-3 mr-1" />}
+                      Megerősítő e-mail újraküldése
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {resendSuccess && (
+              <div className="rounded-lg bg-green-50 p-4 border border-green-100 flex items-start animate-fade-in">
+                <div className="flex-shrink-0"><Mail className="h-5 w-5 text-green-400" /></div>
+                <div className="ml-3"><p className="text-sm font-medium text-green-800">A megerősítő e-mailt újraküldtük!</p></div>
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">E-mail cím</label>
+              <div className="mt-1">
+                <input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm bg-white text-gray-900" />
+              </div>
+            </div>
+
+            <div>
+              <div className="flex justify-between items-center mb-1">
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700">Jelszó</label>
+                <Link to="/auth/forgot-password" size="sm" className="text-xs font-bold text-primary hover:underline">Elfelejtette?</Link>
+              </div>
+              <div className="mt-1">
+                <input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm bg-white text-gray-900" />
+              </div>
+            </div>
+
+            <div>
+              <Button type="submit" fullWidth disabled={loading} className="flex justify-center items-center">
+                {loading ? <RefreshCw className="w-5 h-5 animate-spin" /> : <>Bejelentkezés <LogIn className="ml-2 w-4 h-4" /></>}
+              </Button>
+            </div>
+          </form>
+
+          <div className="mt-6">
+            <div className="relative"><div className="absolute inset-0 flex items-center"><div className="w-full border-t border-gray-300" /></div><div className="relative flex justify-center text-sm"><span className="px-2 bg-white text-gray-500">Nincs még fiókod?</span></div></div>
+            <div className="mt-6 text-center">
+              <Link to="/auth/register" className="font-medium text-primary hover:text-secondary transition-colors underline-offset-4 hover:underline">Regisztrálj ingyenesen</Link>
+            </div>
+          </div>
+        </div>
+        
+        <div className="mt-8 text-center">
+          <Link to="/" className="text-sm text-gray-500 hover:text-gray-900 flex items-center justify-center group">
+             <ArrowLeft className="w-4 h-4 mr-1 group-hover:-translate-x-1 transition-transform" /> Vissza a főoldalra
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

pages/auth/Register.tsx

@@ -0,0 +1,249 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
+import { Button } from '../../components/Button';
+import { useAuth } from '../../context/AuthContext';
+import { UserPlus, AlertCircle, ArrowLeft, CheckCircle, Mail, Info, Send, ShieldCheck } from 'lucide-react';
+
+export const Register: React.FC = () => {
+  const navigate = useNavigate();
+  const { refreshDemoUser } = useAuth();
+  const [lastName, setLastName] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [dateOfBirth, setDateOfBirth] = useState('');
+  const [privacyAccepted, setPrivacyAccepted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    // Alapvető validációk
+    if (!lastName || !firstName) {
+      setError('A név megadása kötelező.');
+      setLoading(false);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('A jelszavak nem egyeznek.');
+      setLoading(false);
+      return;
+    }
+
+    if (password.length < 6) {
+      setError('A jelszónak legalább 6 karakter hosszúnak kell lennie.');
+      setLoading(false);
+      return;
+    }
+
+    if (!dateOfBirth) {
+      setError('A születési dátum megadása kötelező.');
+      setLoading(false);
+      return;
+    }
+
+    if (!privacyAccepted) {
+      setError('A regisztrációhoz el kell fogadnia az Adatkezelési tájékoztatót.');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (!isSupabaseConfigured) {
+        // Demo mód szimuláció
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const demoUser = {
+          user: {
+            id: 'demo-user-123',
+            email: email,
+            user_metadata: {
+              first_name: firstName,
+              last_name: lastName,
+              date_of_birth: dateOfBirth
+            }
+          },
+          access_token: 'demo-token',
+        };
+        localStorage.setItem('demo_user_session', JSON.stringify(demoUser));
+        refreshDemoUser();
+        navigate('/dashboard');
+        return;
+      }
+
+      // HashRouter esetén a redirect URL-nek pontosnak kell lennie.
+      // A window.location.origin a base URL (pl. http://localhost:5173)
+      const redirectUrl = `${window.location.origin}/#/auth/login`;
+
+      console.log('Attempting signup with redirect:', redirectUrl);
+
+      const { data, error: signUpError } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          emailRedirectTo: redirectUrl,
+          data: {
+            first_name: firstName,
+            last_name: lastName,
+            date_of_birth: dateOfBirth,
+          }
+        }
+      });
+
+      if (signUpError) {
+        console.error('Detailed registration error:', signUpError);
+        
+        // Specifikus hibaüzenetek kezelése
+        if (signUpError.message.includes('Error sending confirmation email')) {
+          setError('A rendszer nem tudta kiküldeni a megerősítő e-mailt a Resend szerverén keresztül. Kérjük, ellenőrizze, hogy a Supabase Dashboard-on a "Custom SMTP" beállításoknál a Sender Email megegyezik-e a Resend-ben hitelesített domainnel!');
+        } else if (signUpError.message.includes('User already registered') || signUpError.status === 422) {
+          setError('Ezzel az e-mail címmel már regisztráltak. Kérjük, próbáljon meg bejelentkezni.');
+        } else if (signUpError.status === 429) {
+          setError('Túl sok regisztrációs kísérlet. Kérjük, várjon néhány percet!');
+        } else {
+          setError(`Hiba történt a regisztráció során: ${signUpError.message}`);
+        }
+        setLoading(false);
+        return;
+      }
+
+      if (data.user) {
+        // Ha azonnal van session, akkor nincs e-mail megerősítés (ritka egyedi SMTP-nél)
+        if (data.session) {
+          navigate('/dashboard');
+        } else {
+          setSuccess(true);
+        }
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt a regisztráció során. Kérjük, próbálja meg később.');
+      console.error('Unexpected catch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-lg bg-white p-8 md:p-12 shadow-2xl rounded-[32px] border border-gray-100 text-center animate-fade-in-up">
+          <div className="w-20 h-20 bg-primary/10 rounded-3xl flex items-center justify-center mx-auto mb-8 text-primary shadow-inner">
+            <Mail className="w-10 h-10" />
+          </div>
+          <h2 className="text-3xl font-black text-gray-900 mb-4 tracking-tight">E-mail kiküldve!</h2>
+          <p className="text-gray-600 mb-8 leading-relaxed">
+            Küldtünk egy megerősítő linket a(z) <strong className="text-gray-900">{email}</strong> e-mail címre a <strong>Resend</strong> szolgáltatón keresztül. A belépéshez kérjük, kattintson a levélben található linkre.
+          </p>
+          
+          <div className="bg-blue-50/50 p-6 rounded-2xl text-left mb-8 border border-blue-100 flex gap-4">
+             <div className="mt-1"><Info className="w-5 h-5 text-blue-500" /></div>
+             <div>
+               <p className="text-sm font-bold text-blue-900 mb-1">Nem találja a levelet?</p>
+               <p className="text-xs text-blue-800 leading-relaxed">
+                 Nézze meg a <strong>Spam</strong> vagy a <strong>Promóciók</strong> mappát is. Ha 5 percen belül nem érkezik meg, próbálja meg újra a bejelentkezési oldalon az újraküldést.
+               </p>
+             </div>
+          </div>
+
+          <div className="space-y-4">
+            <Link to="/auth/login" className="block">
+              <Button fullWidth size="lg">Tovább a bejelentkezéshez</Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h2 className="text-4xl font-black text-gray-900 tracking-tighter">Regisztráció</h2>
+          <p className="mt-2 text-sm text-gray-600 font-medium">
+            Csatlakozzon a MotionWeb közösségéhez.
+          </p>
+        </div>
+
+        <div className="bg-white py-10 px-6 md:px-10 shadow-xl rounded-[32px] border border-gray-100">
+          <form className="space-y-6" onSubmit={handleRegister}>
+            {error && (
+              <div className="rounded-2xl bg-red-50 p-4 border border-red-100 flex items-start animate-fade-in shadow-sm">
+                <div className="flex-shrink-0">
+                  <AlertCircle className="h-5 w-5 text-red-400" aria-hidden="true" />
+                </div>
+                <div className="ml-3 text-xs font-bold text-red-800 uppercase tracking-wide leading-relaxed">
+                  {error}
+                </div>
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="lastName" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Vezetéknév</label>
+                <input id="lastName" type="text" required value={lastName} onChange={(e) => setLastName(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="Kovács" />
+              </div>
+              <div>
+                <label htmlFor="firstName" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Keresztnév</label>
+                <input id="firstName" type="text" required value={firstName} onChange={(e) => setFirstName(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="János" />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">E-mail cím</label>
+              <input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="pelda@email.hu" />
+            </div>
+
+            <div>
+              <label htmlFor="dateOfBirth" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Születési dátum</label>
+              <input id="dateOfBirth" type="date" required value={dateOfBirth} onChange={(e) => setDateOfBirth(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="password" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Jelszó</label>
+                <input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="••••••••" />
+              </div>
+              <div>
+                <label htmlFor="confirmPassword" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Megerősítés</label>
+                <input id="confirmPassword" type="password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="••••••••" />
+              </div>
+            </div>
+
+            <div className="flex items-start bg-gray-50 p-4 rounded-2xl border border-gray-100">
+              <input id="privacy" type="checkbox" required checked={privacyAccepted} onChange={(e) => setPrivacyAccepted(e.target.checked)} className="h-5 w-5 text-primary focus:ring-primary border-gray-300 rounded-lg cursor-pointer mt-0.5" />
+              <div className="ml-3 text-sm">
+                <label htmlFor="privacy" className="font-semibold text-gray-700 leading-tight">
+                  Elfogadom az <Link to="/privacy" className="text-primary hover:underline">Adatkezelési tájékoztatót</Link>
+                </label>
+              </div>
+            </div>
+
+            <div className="pt-2">
+              <Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
+                {loading ? 'Fiók létrehozása...' : <>Regisztráció <UserPlus className="ml-2 w-5 h-5" /></>}
+              </Button>
+            </div>
+          </form>
+
+          <div className="mt-8 text-center border-t border-gray-100 pt-6">
+            <span className="text-sm text-gray-500 font-medium">Már van fiókja? </span>
+            <Link to="/auth/login" className="text-sm font-bold text-primary hover:text-secondary transition-colors underline-offset-4 hover:underline">Jelentkezzen be</Link>
+          </div>
+        </div>
+
+        <div className="mt-8 text-center">
+          <Link to="/" className="text-sm font-bold text-gray-400 hover:text-gray-900 flex items-center justify-center transition-all group">
+             <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza a főoldalra
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/auth/ResetPassword.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
+import { Button } from '../../components/Button';
+import { Lock, AlertCircle, CheckCircle, RefreshCw, Save } from 'lucide-react';
+
+export const ResetPassword: React.FC = () => {
+  const navigate = useNavigate();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    // Supabase sets the session automatically when clicking the recovery link
+    const checkSession = async () => {
+      if (isSupabaseConfigured) {
+        const { data } = await supabase.auth.getSession();
+        if (!data.session) {
+           setError("A link lejárt vagy érvénytelen. Kérjük, igényeljen újat!");
+        }
+      }
+    };
+    checkSession();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    if (password.length < 6) {
+      setError('A jelszónak legalább 6 karakternek kell lennie.');
+      setLoading(false);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('A jelszavak nem egyeznek.');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (!isSupabaseConfigured) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        setSuccess(true);
+        return;
+      }
+
+      const { error } = await supabase.auth.updateUser({
+        password: password
+      });
+
+      if (error) {
+        setError(error.message);
+      } else {
+        setSuccess(true);
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight">Új jelszó megadása</h2>
+          <p className="mt-2 text-sm text-gray-600 font-medium">Kérjük, adja meg az új biztonságos jelszavát.</p>
+        </div>
+
+        <div className="bg-white py-10 px-6 md:px-10 shadow-xl rounded-[32px] border border-gray-100">
+          {success ? (
+            <div className="text-center animate-fade-in">
+              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                <CheckCircle className="w-8 h-8 text-green-600" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 mb-2">Jelszó sikeresen módosítva!</h3>
+              <p className="text-gray-600 mb-8 text-sm leading-relaxed">Most már bejelentkezhet az új jelszavával.</p>
+              <Button fullWidth onClick={() => navigate('/auth/login')}>Bejelentkezés</Button>
+            </div>
+          ) : (
+            <form className="space-y-6" onSubmit={handleSubmit}>
+              {error && (
+                <div className="rounded-xl bg-red-50 p-4 border border-red-100 flex items-start animate-fade-in">
+                  <AlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
+                  <p className="ml-3 text-sm font-medium text-red-800">{error}</p>
+                </div>
+              )}
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">Új jelszó</label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-300" />
+                    <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="appearance-none block w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">Megerősítés</label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-300" />
+                    <input type="password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="appearance-none block w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" />
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
+                  {loading ? (
+                    <RefreshCw className="w-5 h-5 animate-spin" />
+                  ) : (
+                    <>Jelszó mentése <Save className="ml-2 w-4 h-4" /></>
+                  )}
+                </Button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

pages/demos/BlueWave.tsx

@@ -0,0 +1,474 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowLeft, Sun, Battery, Zap, ChevronRight, Menu, X, Phone, Mail, CheckCircle, Home, Info, Briefcase, Calculator, ArrowRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export const BlueWave: React.FC = () => {
+  const [activePage, setActivePage] = useState<'home' | 'services' | 'about' | 'contact'>('home');
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  // Smooth scroll to top when "changing pages" in this SPA simulation
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [activePage]);
+
+  // Navbar scroll effect
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const navItems = [
+    { id: 'home', label: 'Főoldal', icon: Home },
+    { id: 'services', label: 'Megoldások', icon: Zap },
+    { id: 'about', label: 'Cégünkről', icon: Info },
+    { id: 'contact', label: 'Kapcsolat', icon: Phone },
+  ];
+
+  return (
+    <div className="font-sans text-gray-800 bg-white min-h-screen flex flex-col selection:bg-[#0284c7] selection:text-white">
+      {/* Return to Main Site */}
+      <div className="fixed bottom-6 right-6 z-[60]">
+        <Link to="/#references">
+          <button className="bg-gray-900 text-white shadow-xl px-5 py-3 rounded-xl text-sm font-sans font-medium flex items-center hover:bg-gray-800 hover:-translate-y-1 transition-all duration-300">
+            <ArrowLeft className="w-4 h-4 mr-2" /> Vissza a referenciákhoz
+          </button>
+        </Link>
+      </div>
+
+      {/* Top Bar */}
+      <div className="bg-[#0f172a] text-gray-300 py-2.5 px-4 text-xs font-medium hidden md:block border-b border-gray-800">
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
+          <div className="flex space-x-8">
+            <span className="flex items-center hover:text-white transition-colors cursor-pointer"><Phone className="w-3.5 h-3.5 mr-2 text-[#38bdf8]" /> +36 30 999 8888</span>
+            <span className="flex items-center hover:text-white transition-colors cursor-pointer"><Mail className="w-3.5 h-3.5 mr-2 text-[#38bdf8]" /> info@bluewave-solar.demo</span>
+          </div>
+          <div className="flex space-x-6">
+             <a href="#" className="hover:text-white transition-colors">Lakossági</a>
+             <a href="#" className="hover:text-white transition-colors">Ipari</a>
+             <a href="#" className="hover:text-white transition-colors text-[#38bdf8]">Partnerprogram</a>
+          </div>
+        </div>
+      </div>
+
+      {/* Navbar */}
+      <nav className={`sticky top-0 z-50 transition-all duration-300 border-b ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-0 border-gray-200' : 'bg-white py-4 border-transparent'}`}>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-20 items-center">
+            <div className="flex items-center cursor-pointer group" onClick={() => setActivePage('home')}>
+              <div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-2.5 rounded-xl mr-3 shadow-lg shadow-sky-200 group-hover:scale-105 transition-transform duration-300">
+                <Sun className="w-7 h-7 text-white" />
+              </div>
+              <div className="leading-none">
+                <span className="block text-2xl font-bold text-gray-900 tracking-tight">BlueWave</span>
+                <span className="block text-xs font-bold text-[#0284c7] uppercase tracking-widest ml-0.5">Solar Systems</span>
+              </div>
+            </div>
+            
+            <div className="hidden md:flex items-center space-x-1">
+              {navItems.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => setActivePage(item.id as any)}
+                  className={`relative px-5 py-2.5 rounded-lg text-sm font-semibold transition-all duration-300 ${
+                    activePage === item.id 
+                      ? 'text-[#0284c7] bg-sky-50' 
+                      : 'text-gray-600 hover:text-[#0284c7] hover:bg-gray-50'
+                  }`}
+                >
+                  {item.label}
+                  {activePage === item.id && (
+                    <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-[#0284c7] rounded-full"></span>
+                  )}
+                </button>
+              ))}
+              <div className="pl-4 ml-4 border-l border-gray-200">
+                <button 
+                  onClick={() => setActivePage('contact')}
+                  className="bg-[#0284c7] hover:bg-[#0369a1] text-white px-6 py-3 rounded-lg font-bold text-sm transition-all shadow-lg shadow-sky-200 hover:-translate-y-0.5"
+                >
+                  Ingyenes felmérés
+                </button>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-6 md:hidden">
+              <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
+                {mobileMenuOpen ? <X /> : <Menu />}
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="md:hidden bg-white border-t border-gray-100 p-4 space-y-2 shadow-xl absolute w-full animate-fade-in">
+            {navItems.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => { setActivePage(item.id as any); setMobileMenuOpen(false); }}
+                className={`w-full flex items-center px-4 py-4 rounded-xl text-base font-medium ${activePage === item.id ? 'bg-sky-50 text-[#0284c7]' : 'text-gray-700 hover:bg-gray-50'}`}
+              >
+                <item.icon className="w-5 h-5 mr-3 opacity-70" />
+                {item.label}
+              </button>
+            ))}
+            <button 
+              onClick={() => { setActivePage('contact'); setMobileMenuOpen(false); }}
+              className="w-full mt-4 bg-[#0284c7] text-white px-4 py-4 rounded-xl font-bold shadow-md"
+            >
+              Ingyenes felmérés
+            </button>
+          </div>
+        )}
+      </nav>
+
+      {/* Main Content Area - Simulating Routing with smooth fade */}
+      <main className="flex-grow relative">
+        <div key={activePage} className="animate-fade-in">
+        
+        {/* HOME PAGE */}
+        {activePage === 'home' && (
+          <>
+            <section className="relative bg-[#0f172a] py-32 lg:py-48 overflow-hidden">
+              <div className="absolute inset-0 z-0">
+                <img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" alt="Solar Panels" className="w-full h-full object-cover opacity-30 scale-105 animate-pulse-slow" />
+                <div className="absolute inset-0 bg-gradient-to-r from-[#0f172a] via-[#0f172a]/90 to-transparent"></div>
+              </div>
+              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="max-w-3xl">
+                   <div className="inline-flex items-center px-4 py-2 rounded-full bg-[#0ea5e9]/10 text-[#38bdf8] text-sm font-bold mb-8 border border-[#0ea5e9]/20 backdrop-blur-sm animate-fade-in-up">
+                     <CheckCircle className="w-4 h-4 mr-2" /> Hivatalos állami kivitelező partner
+                   </div>
+                   <h1 className="text-5xl md:text-7xl font-extrabold text-white mb-8 leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
+                     Váltson tiszta energiára <br/>
+                     <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#38bdf8] to-[#0ea5e9]">a jövőjéért</span>
+                   </h1>
+                   <p className="text-xl text-gray-300 mb-10 leading-relaxed max-w-2xl animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
+                     Csökkentse rezsijét akár 100%-kal prémium napelem rendszereinkkel. Teljeskörű ügyintézés a tervezéstől a kulcsrakész átadásig, 25 év garanciával.
+                   </p>
+                   <div className="flex flex-col sm:flex-row gap-5 animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
+                     <button onClick={() => setActivePage('contact')} className="bg-[#0284c7] hover:bg-[#0369a1] text-white px-10 py-4 rounded-xl font-bold text-lg transition-all flex items-center justify-center shadow-lg shadow-sky-900/50 hover:scale-105">
+                       Kalkuláció kérése <ChevronRight className="w-5 h-5 ml-2" />
+                     </button>
+                     <button onClick={() => setActivePage('services')} className="bg-white/5 hover:bg-white/10 text-white backdrop-blur-sm px-10 py-4 rounded-xl font-bold text-lg transition-all border border-white/10 hover:border-white/30">
+                       Rendszereink
+                     </button>
+                   </div>
+                   
+                   <div className="mt-16 flex items-center gap-8 text-gray-400 text-sm font-medium animate-fade-in-up" style={{ animationDelay: '0.5s' }}>
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-green-500"></div> 1000+ elégedett ügyfél
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-green-500"></div> Országos lefedettség
+                      </div>
+                   </div>
+                </div>
+              </div>
+            </section>
+
+            <section className="py-24 bg-gray-50 relative">
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-32 relative z-20">
+                <div className="grid md:grid-cols-3 gap-8">
+                  {[
+                    { icon: Sun, color: 'text-[#0284c7]', bg: 'bg-sky-50', title: 'Prémium Panelek', desc: 'Tier-1 kategóriás napelemek 25 év teljesítménygaranciával és kiemelkedő hatásfokkal.' },
+                    { icon: Battery, color: 'text-emerald-600', bg: 'bg-emerald-50', title: 'Energiatárolás', desc: 'Hibrid rendszerek és akkumulátoros megoldások a teljes függetlenségért.' },
+                    { icon: Briefcase, color: 'text-orange-600', bg: 'bg-orange-50', title: 'Kulcsrakész', desc: 'Minden papírmunkát, pályázatot és engedélyeztetést elintézünk Ön helyett.' }
+                  ].map((item, i) => (
+                    <div key={i} className="bg-white p-10 rounded-2xl shadow-xl border border-gray-100 hover:-translate-y-2 transition-transform duration-300">
+                      <div className={`w-16 h-16 ${item.bg} rounded-2xl flex items-center justify-center mb-8 ${item.color}`}>
+                        <item.icon className="w-8 h-8" />
+                      </div>
+                      <h3 className="text-2xl font-bold mb-4 text-gray-900">{item.title}</h3>
+                      <p className="text-gray-600 leading-relaxed">{item.desc}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-24">
+                 <div className="text-center mb-16">
+                    <h2 className="text-3xl font-bold text-gray-900 mb-4">Miért válassza a BlueWave-et?</h2>
+                    <p className="text-xl text-gray-600">Szakértelem, minőség és megbízhatóság egy helyen.</p>
+                 </div>
+                 
+                 <div className="grid md:grid-cols-2 gap-12 items-center">
+                    <img src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Engineer" className="rounded-3xl shadow-2xl" />
+                    <div className="space-y-8">
+                       {[
+                         { title: 'Szakértő Mérnökcsapat', text: 'Saját, magasan képzett mérnökeink tervezik meg rendszerét a maximális hatékonyság érdekében.' },
+                         { title: 'Gyors Kivitelezés', text: 'A szerződéskötéstől számított 30 napon belül telepítjük rendszerét.' },
+                         { title: 'Folyamatos Támogatás', text: 'Telepítés után sem engedjük el a kezét, távfelügyeletet és karbantartást biztosítunk.' }
+                       ].map((feat, i) => (
+                         <div key={i} className="flex gap-4">
+                            <div className="w-8 h-8 rounded-full bg-[#0284c7] flex-shrink-0 flex items-center justify-center text-white font-bold mt-1">
+                               {i + 1}
+                            </div>
+                            <div>
+                               <h3 className="text-xl font-bold text-gray-900 mb-2">{feat.title}</h3>
+                               <p className="text-gray-600 leading-relaxed">{feat.text}</p>
+                            </div>
+                         </div>
+                       ))}
+                       <button onClick={() => setActivePage('about')} className="mt-4 text-[#0284c7] font-bold flex items-center hover:underline">
+                          Tudjon meg többet rólunk <ArrowRight className="w-5 h-5 ml-2" />
+                       </button>
+                    </div>
+                 </div>
+              </div>
+            </section>
+          </>
+        )}
+
+        {/* SERVICES PAGE */}
+        {activePage === 'services' && (
+           <div className="py-20 bg-gray-50 min-h-screen">
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="text-center mb-20">
+                  <span className="text-[#0284c7] font-bold uppercase tracking-wider text-sm mb-2 block">Megoldásaink</span>
+                  <h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-6">Minden igényre van válaszunk</h2>
+                  <p className="text-xl text-gray-600 max-w-3xl mx-auto">Legyen szó kis családi házról vagy hatalmas ipari létesítményről, mi megtaláljuk az optimális rendszert.</p>
+                </div>
+                
+                <div className="grid lg:grid-cols-2 gap-16">
+                   {/* Residential */}
+                   <div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
+                      <div className="h-80 overflow-hidden relative">
+                         <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors z-10"></div>
+                         <img src="https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Residential" className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" />
+                         <div className="absolute bottom-6 left-6 z-20">
+                            <span className="bg-white px-4 py-1 rounded-full text-sm font-bold text-[#0284c7] mb-2 inline-block">Lakossági</span>
+                            <h3 className="text-3xl font-bold text-white">Családi Házak</h3>
+                         </div>
+                      </div>
+                      <div className="p-10">
+                         <p className="text-gray-600 mb-8 text-lg leading-relaxed">
+                            Csökkentse otthona energiafüggőségét és növelje ingatlana értékét. Rendszereink diszkrétek, esztétikusak és okosotthon-kompatibilisek.
+                         </p>
+                         <div className="grid sm:grid-cols-2 gap-4 mb-8">
+                            {['Rezsi nullázása', 'Hibrid Inverterek', 'Okos monitorozás', 'Elektromos autó töltés'].map((item, i) => (
+                              <div key={i} className="flex items-center text-gray-700 font-medium">
+                                 <CheckCircle className="w-5 h-5 text-green-500 mr-3" /> {item}
+                              </div>
+                            ))}
+                         </div>
+                         <button onClick={() => setActivePage('contact')} className="w-full py-4 border-2 border-[#0284c7] text-[#0284c7] font-bold rounded-xl hover:bg-[#0284c7] hover:text-white transition-all">
+                            Ajánlatkérés Családi Házra
+                         </button>
+                      </div>
+                   </div>
+
+                   {/* Industrial */}
+                   <div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
+                      <div className="h-80 overflow-hidden relative">
+                         <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors z-10"></div>
+                         <img src="https://images.unsplash.com/photo-1624397640148-949b1732bb0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Commercial" className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" />
+                         <div className="absolute bottom-6 left-6 z-20">
+                            <span className="bg-white px-4 py-1 rounded-full text-sm font-bold text-[#0284c7] mb-2 inline-block">Ipari</span>
+                            <h3 className="text-3xl font-bold text-white">Vállalatok & Üzemek</h3>
+                         </div>
+                      </div>
+                      <div className="p-10">
+                         <p className="text-gray-600 mb-8 text-lg leading-relaxed">
+                            Optimalizálja vállalkozása működési költségeit. Nagy teljesítményű rendszerek, amelyek fedezik a gépek és üzemcsarnokok energiaigényét.
+                         </p>
+                         <div className="grid sm:grid-cols-2 gap-4 mb-8">
+                            {['Gyors megtérülés', '50kW - 5MW teljesítmény', 'ESG megfelelőség', 'Saját transzformátor'].map((item, i) => (
+                              <div key={i} className="flex items-center text-gray-700 font-medium">
+                                 <CheckCircle className="w-5 h-5 text-green-500 mr-3" /> {item}
+                              </div>
+                            ))}
+                         </div>
+                         <button onClick={() => setActivePage('contact')} className="w-full py-4 border-2 border-[#0284c7] text-[#0284c7] font-bold rounded-xl hover:bg-[#0284c7] hover:text-white transition-all">
+                            Ipari Konzultáció Kérése
+                         </button>
+                      </div>
+                   </div>
+                </div>
+              </div>
+           </div>
+        )}
+
+        {/* ABOUT PAGE */}
+        {activePage === 'about' && (
+           <div className="py-20 bg-white">
+              <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+                 <div className="inline-block p-3 rounded-full bg-sky-100 mb-6 text-[#0284c7]">
+                    <Sun className="w-8 h-8" />
+                 </div>
+                 <h2 className="text-4xl font-extrabold text-gray-900 mb-8">A BlueWave Küldetése</h2>
+                 <p className="text-xl text-gray-700 leading-relaxed mb-12">
+                    A BlueWave Solar Kft. 2015-ben azzal a céllal alakult, hogy elérhetővé tegye a napenergiát mindenki számára. Hiszünk abban, hogy a fenntarthatóság nem luxus, hanem a jövő záloga. Csapatunk okleveles mérnökökből, pályázati szakértőkből és tapasztalt kivitelezőkből áll.
+                 </p>
+                 
+                 <div className="bg-gradient-to-br from-[#0f172a] to-[#1e293b] rounded-3xl p-12 text-white shadow-2xl mb-16 relative overflow-hidden">
+                    <div className="relative z-10 grid grid-cols-1 md:grid-cols-3 gap-12">
+                      <div>
+                         <div className="text-5xl font-bold text-[#38bdf8] mb-2">500+</div>
+                         <div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Telepített rendszer</div>
+                      </div>
+                      <div>
+                         <div className="text-5xl font-bold text-[#38bdf8] mb-2">15MW</div>
+                         <div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Össz teljesítmény</div>
+                      </div>
+                      <div>
+                         <div className="text-5xl font-bold text-[#38bdf8] mb-2">100%</div>
+                         <div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Ügyfél elégedettség</div>
+                      </div>
+                    </div>
+                    {/* Background decorations */}
+                    <div className="absolute top-0 right-0 w-64 h-64 bg-[#38bdf8] rounded-full filter blur-[100px] opacity-20"></div>
+                 </div>
+
+                 <div className="grid md:grid-cols-3 gap-8 text-left">
+                    <div className="bg-gray-50 p-8 rounded-2xl">
+                       <h3 className="font-bold text-xl mb-3">Minőség</h3>
+                       <p className="text-gray-600">Kizárólag minősített, prémium gyártók termékeit használjuk, hogy rendszere évtizedekig működjön.</p>
+                    </div>
+                    <div className="bg-gray-50 p-8 rounded-2xl">
+                       <h3 className="font-bold text-xl mb-3">Innováció</h3>
+                       <p className="text-gray-600">Folyamatos követjük a technológia fejlődését, hogy a legmodernebb megoldásokat kínálhassuk.</p>
+                    </div>
+                    <div className="bg-gray-50 p-8 rounded-2xl">
+                       <h3 className="font-bold text-xl mb-3">Garancia</h3>
+                       <p className="text-gray-600">A kivitelezésre és a termékekre is kiemelkedő garanciális feltételeket biztosítunk.</p>
+                    </div>
+                 </div>
+              </div>
+           </div>
+        )}
+
+        {/* CONTACT PAGE */}
+        {activePage === 'contact' && (
+           <div className="py-20 bg-[#f8fafc] min-h-screen">
+              <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+                 <div className="grid lg:grid-cols-5 gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
+                    {/* Left Panel */}
+                    <div className="lg:col-span-2 bg-[#0284c7] p-10 text-white flex flex-col justify-between relative overflow-hidden">
+                       <div className="relative z-10">
+                          <h3 className="text-2xl font-bold mb-6">Lépjen velünk kapcsolatba</h3>
+                          <p className="text-sky-100 mb-8">
+                             Töltse ki az űrlapot egy ingyenes, kötelezettségmentes előzetes kalkulációért. Mérnök kollégánk 24 órán belül keresni fogja.
+                          </p>
+                          <div className="space-y-6">
+                             <div className="flex items-center gap-4">
+                                <Phone className="w-6 h-6 text-sky-200" /> 
+                                <span className="font-medium">+36 30 999 8888</span>
+                             </div>
+                             <div className="flex items-center gap-4">
+                                <Mail className="w-6 h-6 text-sky-200" /> 
+                                <span className="font-medium">info@bluewave-solar.demo</span>
+                             </div>
+                             <div className="flex items-center gap-4">
+                                <Home className="w-6 h-6 text-sky-200" /> 
+                                <span className="font-medium">1117 Budapest, Napelem u. 1.</span>
+                             </div>
+                          </div>
+                       </div>
+                       <div className="relative z-10 mt-12">
+                          <p className="text-sm text-sky-200 opacity-80">
+                             Nyitvatartás: H-P 8:00 - 17:00
+                          </p>
+                       </div>
+                       {/* Circle decorations */}
+                       <div className="absolute -bottom-10 -right-10 w-48 h-48 bg-sky-500 rounded-full opacity-50"></div>
+                       <div className="absolute top-10 right-10 w-20 h-20 bg-sky-400 rounded-full opacity-30"></div>
+                    </div>
+
+                    {/* Right Panel - Form */}
+                    <div className="lg:col-span-3 p-10">
+                       <h2 className="text-2xl font-bold text-gray-900 mb-6">Ingyenes Ajánlatkérés</h2>
+                       <form className="space-y-6">
+                          <div className="grid md:grid-cols-2 gap-6">
+                             <div>
+                                <label className="block text-sm font-semibold text-gray-700 mb-2">Teljes Név</label>
+                                <input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="Kovács János" />
+                             </div>
+                             <div>
+                                <label className="block text-sm font-semibold text-gray-700 mb-2">Telefonszám</label>
+                                <input type="tel" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="+36 30 123 4567" />
+                             </div>
+                          </div>
+                          <div>
+                             <label className="block text-sm font-semibold text-gray-700 mb-2">Email Cím</label>
+                             <input type="email" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="janos@pelda.hu" />
+                          </div>
+                          
+                          <div className="p-6 bg-sky-50 rounded-xl border border-sky-100">
+                             <div className="flex items-center gap-2 mb-4 text-[#0284c7] font-bold">
+                                <Calculator className="w-5 h-5" /> Gyors Kalkulátor Adatok
+                             </div>
+                             <div className="grid md:grid-cols-2 gap-6">
+                                <div>
+                                    <label className="block text-sm font-semibold text-gray-700 mb-2">Havi villanyszámla (kb.)</label>
+                                    <input type="number" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] outline-none bg-white text-gray-900" placeholder="Pl: 25000" />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-semibold text-gray-700 mb-2">Telepítés Helyszíne</label>
+                                    <input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] outline-none bg-white text-gray-900" placeholder="Város / Irányítószám" />
+                                </div>
+                             </div>
+                          </div>
+
+                          <div className="pt-2">
+                             <button type="button" className="w-full bg-[#0284c7] hover:bg-[#0369a1] text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
+                                Díjmentes Kalkuláció Kérése
+                             </button>
+                             <p className="text-center text-xs text-gray-500 mt-4">
+                                Az ajánlatkérés nem jár kötelezettséggel. Adatvédelmi irányelveinket elfogadom.
+                             </p>
+                          </div>
+                       </form>
+                    </div>
+                 </div>
+              </div>
+           </div>
+        )}
+        
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-[#0f172a] text-white py-16 border-t border-gray-800">
+         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="grid md:grid-cols-4 gap-12 mb-12">
+               <div className="col-span-1 md:col-span-2">
+                  <div className="flex items-center mb-6">
+                     <div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-2 rounded-lg mr-3">
+                        <Sun className="w-6 h-6 text-white" />
+                     </div>
+                     <span className="text-2xl font-bold">BlueWave<span className="text-[#38bdf8]">Solar</span></span>
+                  </div>
+                  <p className="text-gray-400 max-w-sm leading-relaxed">
+                     Magyarország vezető napenergia szolgáltatója. Célunk, hogy ügyfeleink számára energiafüggetlenséget és fenntartható jövőt biztosítsunk.
+                  </p>
+               </div>
+               <div>
+                  <h4 className="font-bold text-lg mb-6 text-white">Navigáció</h4>
+                  <ul className="space-y-3 text-gray-400">
+                     <li onClick={() => setActivePage('home')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Főoldal</li>
+                     <li onClick={() => setActivePage('services')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Megoldások</li>
+                     <li onClick={() => setActivePage('about')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Rólunk</li>
+                     <li onClick={() => setActivePage('contact')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Kapcsolat</li>
+                  </ul>
+               </div>
+               <div>
+                  <h4 className="font-bold text-lg mb-6 text-white">Kapcsolat</h4>
+                  <div className="space-y-3 text-gray-400">
+                     <p>1117 Budapest, Napelem u. 1.</p>
+                     <p>+36 30 999 8888</p>
+                     <p>info@bluewave-solar.demo</p>
+                  </div>
+               </div>
+            </div>
+            <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
+               <p>&copy; 2024 BlueWave Solar Kft. Minden jog fenntartva.</p>
+               <p>Demonstrációs weboldal - MotionWeb Pro csomag</p>
+            </div>
+         </div>
+      </footer>
+    </div>
+  );
+};

pages/demos/Steelguard.tsx

@@ -0,0 +1,428 @@
+import React, { useEffect, useState } from 'react';
+import { ArrowLeft, Shield, Lock, Eye, Server, Cpu, Globe, ChevronDown, PlayCircle, Fingerprint, Scan, Activity, Radio, Terminal, Box, Building2, Users, MapPin } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export const Steelguard: React.FC = () => {
+  const [scrolled, setScrolled] = useState(false);
+  const [activeTab, setActiveTab] = useState<'home' | 'solutions' | 'hardware' | 'sectors' | 'company'>('home');
+  
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Reset scroll when changing tabs
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [activeTab]);
+
+  return (
+    <div className="font-sans bg-[#020205] text-gray-100 min-h-screen selection:bg-cyan-500 selection:text-black overflow-x-hidden relative">
+       
+       {/* INJECTED STYLES FOR ADVANCED ANIMATIONS */}
+       <style>{`
+        @keyframes grid-move {
+          0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
+          100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
+        }
+        @keyframes scanline {
+          0% { transform: translateY(-100%); }
+          100% { transform: translateY(100%); }
+        }
+        @keyframes blob {
+          0% { transform: translate(0px, 0px) scale(1); }
+          33% { transform: translate(30px, -50px) scale(1.1); }
+          66% { transform: translate(-20px, 20px) scale(0.9); }
+          100% { transform: translate(0px, 0px) scale(1); }
+        }
+        @keyframes pulse-glow {
+          0%, 100% { box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); }
+          50% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.6); }
+        }
+        .text-glow:hover {
+          text-shadow: 0 0 10px rgba(34, 211, 238, 0.8), 0 0 20px rgba(34, 211, 238, 0.4);
+        }
+        .animate-grid-move {
+          animation: grid-move 2s linear infinite;
+        }
+        .animate-blob {
+          animation: blob 10s infinite;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+        .glass-panel {
+          background: rgba(10, 15, 30, 0.6);
+          backdrop-filter: blur(12px);
+          border: 1px solid rgba(6, 182, 212, 0.1);
+          box-shadow: 0 0 15px rgba(0,0,0,0.5);
+        }
+        .cyber-button {
+          position: relative;
+          overflow: hidden;
+          transition: all 0.3s;
+        }
+        .cyber-button::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+          transition: 0.5s;
+        }
+        .cyber-button:hover::before {
+          left: 100%;
+        }
+        .clip-path-polygon {
+          clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
+        }
+       `}</style>
+
+       {/* Return to Main Site */}
+       <div className="fixed bottom-6 right-6 z-[60] mix-blend-difference">
+        <Link to="/#references">
+          <button className="bg-white text-black px-6 py-2 rounded-sm uppercase text-[10px] font-bold tracking-[0.3em] hover:bg-cyan-500 hover:text-white transition-all duration-300 flex items-center group">
+            <ArrowLeft className="w-3 h-3 mr-3 group-hover:-translate-x-1 transition-transform" /> BACK TO REALITY
+          </button>
+        </Link>
+      </div>
+
+      {/* Enterprise Navbar */}
+      <nav className={`fixed w-full z-40 transition-all duration-500 border-b ${scrolled ? 'bg-[#050505]/80 backdrop-blur-xl border-cyan-900/30 py-2' : 'bg-transparent border-transparent py-6'}`}>
+        <div className="max-w-[1600px] mx-auto px-8 flex items-center justify-between">
+          <div className="flex items-center gap-4 group cursor-pointer" onClick={() => setActiveTab('home')}>
+            <div className="relative">
+              <div className="absolute inset-0 bg-cyan-500 blur-md opacity-20 group-hover:opacity-60 transition-opacity duration-500 animate-pulse"></div>
+              <div className="w-10 h-10 bg-[#0a0a0a] border border-cyan-500/50 flex items-center justify-center relative z-10 clip-path-polygon group-hover:border-cyan-400 transition-colors">
+                <Shield className="text-cyan-400 w-5 h-5" />
+              </div>
+            </div>
+            <div className="flex flex-col text-left">
+              <span className="text-2xl font-bold tracking-tighter text-white font-mono group-hover:text-cyan-400 transition-colors">STEELGUARD</span>
+              <div className="flex items-center gap-2">
+                <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
+                <span className="text-[9px] text-cyan-600 tracking-[0.4em] uppercase">Systems Online</span>
+              </div>
+            </div>
+          </div>
+          
+          <div className="hidden lg:flex items-center space-x-12 text-[10px] font-bold tracking-[0.2em] text-gray-500 font-mono">
+             {[
+               { id: 'solutions', label: 'Solutions' },
+               { id: 'hardware', label: 'Hardware' },
+               { id: 'sectors', label: 'Sectors' },
+               { id: 'company', label: 'Company' }
+             ].map((item) => (
+               <button 
+                 key={item.id} 
+                 onClick={() => setActiveTab(item.id as any)}
+                 className={`transition-all relative group py-2 uppercase ${activeTab === item.id ? 'text-cyan-400' : 'hover:text-cyan-400'}`}
+               >
+                 <span className={`text-cyan-800 transition-opacity ${activeTab === item.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} mr-1`}>&lt;</span>
+                 {item.label}
+                 <span className={`text-cyan-800 transition-opacity ${activeTab === item.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} ml-1`}>/&gt;</span>
+                 <span className={`absolute bottom-0 left-0 h-[1px] bg-cyan-500 transition-all duration-300 shadow-[0_0_10px_#06b6d4] ${activeTab === item.id ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
+               </button>
+             ))}
+          </div>
+
+          <div className="flex items-center gap-6">
+            <button onClick={() => setActiveTab('home')} className="text-[10px] font-bold text-gray-500 hover:text-white uppercase tracking-[0.2em] hidden sm:block transition-colors border border-transparent hover:border-gray-800 px-4 py-2">
+              Login_Portal
+            </button>
+            <button className="cyber-button bg-cyan-600 hover:bg-cyan-500 text-black px-8 py-3 text-[10px] font-bold uppercase tracking-[0.2em] transition-all shadow-[0_0_20px_rgba(8,145,178,0.4)] hover:shadow-[0_0_30px_rgba(6,182,212,0.6)]">
+              Initialize
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Main Content Router Simulation */}
+      <main className="animate-fade-in">
+        
+        {/* HOME VIEW */}
+        {activeTab === 'home' && (
+          <>
+            <header className="relative h-screen flex items-center justify-center overflow-hidden bg-[#020205]">
+               <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
+                 <div className="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] bg-blue-900/20 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob"></div>
+                 <div className="absolute top-[20%] right-[-20%] w-[500px] h-[500px] bg-cyan-900/20 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob animation-delay-2000"></div>
+                 <div className="absolute bottom-[-20%] left-[20%] w-[600px] h-[600px] bg-purple-900/10 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob animation-delay-4000"></div>
+                 <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:50px_50px]"></div>
+                 <div className="absolute inset-0 bg-gradient-to-t from-[#020205] via-transparent to-transparent"></div>
+                 <div className="absolute inset-0 bg-gradient-to-b from-[#020205] via-transparent to-transparent"></div>
+               </div>
+
+               <div className="relative z-10 max-w-[1400px] mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center mt-20">
+                 <div>
+                   <div className="inline-flex items-center gap-3 px-4 py-2 border border-cyan-500/30 bg-cyan-900/10 text-cyan-400 text-[10px] font-bold tracking-[0.3em] mb-10 animate-fade-in-up backdrop-blur-md">
+                     <Terminal className="w-3 h-3" />
+                     <span className="animate-pulse">ESTABLISHING SECURE CONNECTION...</span>
+                   </div>
+                   <h1 className="text-6xl lg:text-8xl font-bold text-white leading-[0.9] mb-8 font-mono animate-fade-in-up" style={{animationDelay: '0.1s'}}>
+                     TOTAL <br/>
+                     <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-[0_0_15px_rgba(6,182,212,0.5)]">DEFENSE</span>
+                   </h1>
+                   <p className="text-lg text-gray-400 max-w-lg mb-12 leading-relaxed animate-fade-in-up border-l-2 border-cyan-900/50 pl-6" style={{animationDelay: '0.2s'}}>
+                     Advanced AI-driven security architecture for enterprise infrastructure. <span className="text-cyan-400 font-bold">Zero-trust protocols</span> and predictive threat neutralization active.
+                   </p>
+                   <div className="flex flex-wrap gap-6 animate-fade-in-up" style={{animationDelay: '0.3s'}}>
+                     <button onClick={() => setActiveTab('solutions')} className="cyber-button bg-white text-black hover:bg-cyan-50 px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] flex items-center gap-4 transition-all hover:pr-12 group shadow-[0_0_20px_rgba(255,255,255,0.3)]">
+                       Execute Protocol <ChevronDown className="w-4 h-4 group-hover:translate-y-1 transition-transform" />
+                     </button>
+                     <button className="border border-gray-800 hover:border-cyan-500 text-gray-300 hover:text-cyan-400 px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] flex items-center gap-4 transition-all bg-[#0a0a0a]/50 backdrop-blur-sm group hover:shadow-[0_0_15px_rgba(6,182,212,0.3)]">
+                       <PlayCircle className="w-4 h-4 group-hover:scale-110 transition-transform" /> Simulation
+                     </button>
+                   </div>
+                 </div>
+                 
+                 <div className="relative hidden lg:block animate-fade-in perspective-1000" style={{animationDelay: '0.5s'}}>
+                   <div className="relative w-full aspect-square flex items-center justify-center transform-style-3d rotate-y-12">
+                      <div className="absolute w-[80%] h-[80%] border border-cyan-900/40 rounded-full animate-[spin_20s_linear_infinite] shadow-[0_0_30px_rgba(6,182,212,0.1)]"></div>
+                      <div className="absolute w-[60%] h-[60%] border-2 border-dashed border-cyan-500/20 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
+                      <div className="relative z-10 w-[70%] h-[70%] rounded-2xl overflow-hidden border border-cyan-500/30 group shadow-[0_0_50px_rgba(6,182,212,0.15)]">
+                          <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1000&q=80" alt="Tech Visual" className="w-full h-full object-cover opacity-60 mix-blend-luminosity group-hover:scale-105 transition-transform duration-1000 grayscale" />
+                          <div className="absolute inset-0 bg-cyan-900/20 mix-blend-overlay"></div>
+                          <div className="absolute top-0 left-0 w-full h-[2px] bg-cyan-400 shadow-[0_0_20px_#22d3ee] animate-[scanline_3s_linear_infinite]"></div>
+                      </div>
+                      <div className="absolute top-20 -right-10 glass-panel p-4 flex items-center gap-4 animate-[bounce_4s_infinite] border-l-2 border-l-green-500">
+                         <Activity className="w-6 h-6 text-green-500 animate-pulse" />
+                         <div>
+                           <p className="text-[9px] text-gray-400 uppercase tracking-widest font-mono">Status</p>
+                           <p className="text-xs font-bold text-green-400 font-mono tracking-wider">OPTIMAL_FLOW</p>
+                         </div>
+                      </div>
+                   </div>
+                 </div>
+               </div>
+            </header>
+
+            <section className="py-32 bg-[#020205]">
+              <div className="max-w-[1400px] mx-auto px-6">
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                   {[
+                     { icon: Eye, title: 'Neural Surveillance', desc: 'Real-time object recognition and behavioral prediction algorithms.' },
+                     { icon: Scan, title: 'Retinal Access', desc: '99.999% accuracy biometric entry points with liveness detection.' },
+                     { icon: Server, title: 'Core Defense', desc: 'Hardened physical and logical shielding for data centers.' },
+                     { icon: Globe, title: 'Global Ops', desc: '24/7 localized threat monitoring from orbit-synced satellites.' },
+                     { icon: Cpu, title: 'IoT Mesh', desc: 'Thousands of interconnected sensors forming an unbreakable web.' },
+                     { icon: Shield, title: 'Hybrid Firewall', desc: 'Simultaneous protection against kinetic and digital intrusion.' },
+                   ].map((item, i) => (
+                     <div key={i} className="group relative bg-[#05070a] border border-gray-800 p-10 overflow-hidden hover:border-cyan-500/50 transition-all duration-500">
+                       <div className="relative z-10">
+                          <div className="w-14 h-14 bg-[#0a0f18] border border-gray-800 group-hover:border-cyan-500 flex items-center justify-center mb-8 transition-all">
+                              <item.icon className="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors" />
+                          </div>
+                          <h3 className="text-xl font-bold text-white mb-4 font-mono group-hover:text-cyan-300 transition-colors">{item.title}</h3>
+                          <p className="text-gray-500 text-xs leading-relaxed group-hover:text-gray-300 transition-colors font-mono">{item.desc}</p>
+                       </div>
+                     </div>
+                   ))}
+                </div>
+              </div>
+            </section>
+          </>
+        )}
+
+        {/* SOLUTIONS VIEW */}
+        {activeTab === 'solutions' && (
+          <section className="pt-40 pb-20 px-8">
+            <div className="max-w-6xl mx-auto">
+              <div className="flex items-center gap-4 mb-10">
+                <div className="w-12 h-1 bg-cyan-500"></div>
+                <h2 className="text-4xl font-mono font-black uppercase tracking-tighter">Strategic Solutions</h2>
+              </div>
+              
+              <div className="grid lg:grid-cols-2 gap-16 items-center">
+                 <div className="space-y-10">
+                    <p className="text-xl text-gray-400 font-mono leading-relaxed">
+                      We offer a multi-layered security stack designed to neutralize threats before they reach your perimeter. 
+                    </p>
+                    <div className="space-y-6">
+                       {[
+                         { title: "Zero Trust Architecture", desc: "Never trust, always verify. Every node is isolated and encrypted." },
+                         { title: "Predictive AI Shield", desc: "Our neural networks predict intrusion patterns with 99.8% accuracy." },
+                         { title: "Cloud Integration", desc: "Seamless security across AWS, Azure, and private data centers." }
+                       ].map((sol, i) => (
+                         <div key={i} className="bg-[#05070a] border-l-4 border-l-cyan-500 p-6">
+                            <h4 className="font-bold text-cyan-400 mb-2 font-mono uppercase text-sm">{sol.title}</h4>
+                            <p className="text-gray-500 text-xs font-mono">{sol.desc}</p>
+                         </div>
+                       ))}
+                    </div>
+                 </div>
+                 <div className="relative group">
+                    <div className="absolute -inset-2 bg-cyan-500 blur-2xl opacity-10 group-hover:opacity-30 transition-opacity"></div>
+                    <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1200&q=80" alt="Solution" className="rounded-2xl border border-cyan-500/20 relative z-10" />
+                 </div>
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* HARDWARE VIEW */}
+        {activeTab === 'hardware' && (
+          <section className="pt-40 pb-20 px-8">
+            <div className="max-w-6xl mx-auto">
+              <div className="flex items-center gap-4 mb-10">
+                <div className="w-12 h-1 bg-cyan-500"></div>
+                <h2 className="text-4xl font-mono font-black uppercase tracking-tighter">Hardened Hardware</h2>
+              </div>
+              
+              <div className="grid md:grid-cols-3 gap-8">
+                 {[
+                   { icon: Box, name: "Node V4 Unit", img: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&q=80" },
+                   { icon: Cpu, name: "Neural Processor", img: "https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&w=800&q=80" },
+                   { icon: Shield, name: "Quantum Enclosure", img: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=800&q=80" }
+                 ].map((hw, i) => (
+                   <div key={i} className="bg-[#05070a] rounded-2xl overflow-hidden border border-gray-800 hover:border-cyan-500/40 transition-all">
+                      <img src={hw.img} alt={hw.name} className="h-48 w-full object-cover grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all" />
+                      <div className="p-6">
+                         <div className="flex items-center gap-3 mb-4">
+                           <hw.icon className="w-5 h-5 text-cyan-500" />
+                           <span className="font-mono font-bold uppercase text-xs">{hw.name}</span>
+                         </div>
+                         <button className="w-full py-2 bg-gray-900 border border-gray-800 text-[10px] font-bold uppercase tracking-widest hover:bg-cyan-600 hover:text-black transition-all">View Specs</button>
+                      </div>
+                   </div>
+                 ))}
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* SECTORS VIEW */}
+        {activeTab === 'sectors' && (
+          <section className="pt-40 pb-20 px-8 text-center">
+            <div className="max-w-5xl mx-auto">
+              <h2 className="text-5xl font-mono font-black uppercase tracking-tighter mb-6">Strategic Sectors</h2>
+              <p className="text-gray-400 font-mono mb-20">Steelguard protects the infrastructure that power nations.</p>
+              
+              <div className="grid md:grid-cols-3 gap-12">
+                 {[
+                   { icon: Building2, label: "Enterprise", count: "400+ Nodes" },
+                   { icon: Globe, label: "Government", count: "12 Nations" },
+                   { icon: Shield, label: "Defense", count: "Active Mesh" }
+                 ].map((sector, i) => (
+                   <div key={i} className="flex flex-col items-center group cursor-default">
+                      <div className="w-24 h-24 rounded-full border-2 border-gray-800 flex items-center justify-center mb-6 group-hover:border-cyan-500 group-hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all">
+                         <sector.icon className="w-10 h-10 text-gray-500 group-hover:text-cyan-400 transition-colors" />
+                      </div>
+                      <h3 className="font-mono font-black uppercase text-xl mb-2">{sector.label}</h3>
+                      <span className="text-[10px] font-mono text-cyan-600 tracking-widest">{sector.count}</span>
+                   </div>
+                 ))}
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* COMPANY VIEW */}
+        {activeTab === 'company' && (
+          <section className="pt-40 pb-20 px-8">
+            <div className="max-w-4xl mx-auto">
+               <div className="grid md:grid-cols-2 gap-16 items-center">
+                  <div className="relative">
+                    <div className="absolute -inset-4 bg-cyan-500/5 blur-3xl rounded-full"></div>
+                    <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1000&q=80" alt="Office" className="rounded-3xl relative z-10 opacity-70 grayscale hover:grayscale-0 transition-all" />
+                  </div>
+                  <div>
+                    <span className="text-cyan-500 font-mono text-[10px] tracking-widest block mb-4 uppercase">Origins</span>
+                    <h2 className="text-4xl font-mono font-black uppercase mb-8">Engineering <br/>Secured Future</h2>
+                    <p className="text-gray-400 font-mono text-sm leading-loose mb-8">
+                      Founded in 2042, Steelguard Defense Systems has evolved from a small hardware research lab into a global leader in AI-driven security architecture. Our mission is absolute protection through innovation.
+                    </p>
+                    <div className="flex items-center gap-8">
+                       <div>
+                          <p className="text-3xl font-black text-white font-mono">15</p>
+                          <p className="text-[9px] text-gray-600 uppercase font-mono tracking-widest">Global Hubs</p>
+                       </div>
+                       <div>
+                          <p className="text-3xl font-black text-white font-mono">850+</p>
+                          <p className="text-[9px] text-gray-600 uppercase font-mono tracking-widest">Architects</p>
+                       </div>
+                    </div>
+                  </div>
+               </div>
+            </div>
+          </section>
+        )}
+
+        {/* MAP INTEGRATION */}
+        {activeTab === 'home' && (
+          <section className="py-20 bg-[#050505] relative overflow-hidden">
+             <div className="max-w-[1400px] mx-auto px-6">
+                <div className="flex items-center gap-4 mb-10">
+                   <MapPin className="text-cyan-500 w-6 h-6" />
+                   <h2 className="text-2xl font-mono font-black uppercase tracking-widest">Command Center HQ</h2>
+                </div>
+                <div className="relative w-full h-[500px] rounded-3xl overflow-hidden border border-cyan-900/30 group shadow-[0_0_30px_rgba(0,0,0,0.5)]">
+                   <div className="absolute inset-0 z-10 pointer-events-none border-[10px] border-[#020205] opacity-80"></div>
+                   <div className="absolute inset-0 z-10 pointer-events-none ring-1 ring-cyan-500/20"></div>
+                   <iframe 
+                    title="Steelguard HQ Map"
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2695.565377508381!2d19.0354183769188!3d47.49831737118037!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741dc41c2c8f877%3A0x7292275f0a2072e!2sBudapest%2C%20Szent%20Gy%C3%B6rgy%20t%C3%A9r%2C%201014!5e0!3m2!1shu!2shu!4v1716300000000!5m2!1shu!2shu" 
+                    width="100%" 
+                    height="100%" 
+                    style={{ border: 0, filter: 'grayscale(1) invert(0.9) contrast(1.2)' }} 
+                    allowFullScreen 
+                    loading="lazy" 
+                    referrerPolicy="no-referrer-when-downgrade"
+                   ></iframe>
+                   <div className="absolute top-0 left-0 w-full h-full bg-cyan-500/5 mix-blend-color pointer-events-none"></div>
+                </div>
+             </div>
+          </section>
+        )}
+
+      </main>
+
+      {/* Footer / CTA */}
+      <footer className="py-32 bg-[#020205] relative overflow-hidden">
+        <div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-0 divide-x divide-gray-900 text-center relative z-10 border-y border-gray-900 mb-20">
+            {[
+                { val: '500+', label: 'NODES ACTIVE' },
+                { val: '0.01ms', label: 'LATENCY' },
+                { val: '100%', label: 'UPTIME' },
+                { val: 'SECURE', label: 'STATUS' }
+            ].map((stat, i) => (
+                <div key={i} className="relative py-10 group hover:bg-cyan-900/5 transition-colors cursor-default">
+                   <div className="text-5xl font-bold text-gray-700 mb-2 font-mono group-hover:text-cyan-400 group-hover:scale-110 transition-all duration-300 text-glow">{stat.val}</div>
+                   <div className="text-cyan-900 text-[10px] font-bold uppercase tracking-[0.3em] group-hover:text-cyan-600">{stat.label}</div>
+                </div>
+            ))}
+        </div>
+
+        <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
+           <div className="inline-block mb-10 p-4 border border-cyan-500/30 rounded-full animate-pulse-glow">
+              <Shield className="w-12 h-12 text-cyan-500" />
+           </div>
+           <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 font-mono uppercase">
+             SECURE YOUR <span className="text-cyan-500">FUTURE</span>
+           </h2>
+           <p className="text-gray-400 mb-12 text-lg max-w-xl mx-auto font-mono text-xs leading-loose">
+             Initiate contact with our security architects. Design a defense strategy leveraging next-gen technologies.
+           </p>
+           <div className="flex flex-col sm:flex-row justify-center gap-6">
+             <button className="cyber-button bg-cyan-600 hover:bg-cyan-500 text-black px-12 py-5 font-bold uppercase tracking-[0.2em] text-xs transition-all shadow-[0_0_20px_rgba(8,145,178,0.5)]">
+               Initialize Sequence
+             </button>
+             <button className="border border-gray-800 hover:border-white text-gray-400 hover:text-white px-12 py-5 font-bold uppercase tracking-[0.2em] text-xs transition-all hover:bg-white/5 hover:shadow-[0_0_15px_rgba(255,255,255,0.2)]">
+               Download Manifest
+             </button>
+           </div>
+           <div className="mt-32 pt-10 border-t border-gray-900 text-gray-600 text-[9px] uppercase tracking-[0.2em] flex flex-col md:flex-row justify-between items-center gap-4 font-mono">
+             <div>&copy; 2024 STEELGUARD DEFENSE SYSTEMS.</div> 
+             <div className="text-cyan-900">SYSTEM_ID: MW-ENT-8842</div>
+           </div>
+        </div>
+      </footer>
+    </div>
+  );
+};

pages/demos/SweetCraving.tsx

@@ -0,0 +1,266 @@
+import React, { useEffect, useState } from 'react';
+import { ArrowLeft, Instagram, Facebook, MapPin, Phone, Mail, Clock, Heart, Star, ChevronDown } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export const SweetCraving: React.FC = () => {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className="font-serif bg-[#FFF5F5] text-[#5D4037] min-h-screen scroll-smooth">
+      {/* Return to Main Site Button */}
+      <div className="fixed bottom-6 right-6 z-[60]">
+        <Link to="/#references">
+          <button className="bg-white/90 backdrop-blur-md shadow-lg px-5 py-2.5 rounded-full text-sm font-sans font-medium flex items-center hover:bg-white hover:scale-105 transition-all duration-300 group text-[#E91E63]">
+            <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> 
+            Vissza a referenciákhoz
+          </button>
+        </Link>
+      </div>
+
+      {/* Dynamic Navigation */}
+      <nav 
+        className={`fixed top-0 w-full z-40 transition-all duration-500 ${
+          scrolled 
+            ? 'bg-white/90 backdrop-blur-md shadow-lg py-3' 
+            : 'bg-transparent py-6'
+        }`}
+      >
+        <div className="max-w-6xl mx-auto px-6 flex justify-between items-center">
+          <div className={`text-3xl font-bold text-[#E91E63] italic transition-all duration-300 ${scrolled ? 'scale-90' : 'scale-100'}`}>
+            SweetCraving
+          </div>
+          <div className="hidden md:flex space-x-10 font-medium font-sans text-sm tracking-wide">
+            {['Kezdőlap', 'Rólunk', 'Kínálat', 'Vélemények'].map((item, i) => (
+              <a 
+                key={i} 
+                href={`#${item.toLowerCase() === 'kezdőlap' ? 'home' : item === 'Kínálat' ? 'menu' : item === 'Rólunk' ? 'about' : 'contact'}`} 
+                className="hover:text-[#E91E63] relative group transition-colors"
+              >
+                {item}
+                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#E91E63] transition-all group-hover:w-full"></span>
+              </a>
+            ))}
+          </div>
+          <button className="bg-[#E91E63] text-white px-8 py-2.5 rounded-full font-sans font-bold text-sm hover:bg-[#D81B60] transition-all shadow-lg hover:shadow-[#E91E63]/30 hover:-translate-y-0.5 transform">
+            Rendelés
+          </button>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <div className="absolute inset-0 z-0">
+          <img 
+            src="https://images.unsplash.com/photo-1558961363-fa8fdf82db35?auto=format&fit=crop&w=1920&q=80" 
+            alt="Desszertműhely Hero" 
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-[#FFF5F5] via-white/20 to-transparent"></div>
+        </div>
+        
+        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
+          <div className="animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
+            <span className="bg-white/80 backdrop-blur-md px-6 py-2 rounded-full text-[#E91E63] text-xs font-bold font-sans tracking-[0.2em] uppercase mb-8 inline-block shadow-sm">
+              Kézműves Desszertműhely
+            </span>
+          </div>
+          
+          <h1 className="text-6xl md:text-8xl font-bold mb-8 drop-shadow-sm text-gray-900 leading-tight animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
+            Édes Álmok <br/>
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#E91E63] to-[#FF80AB]">
+              Süteménybe Zárva
+            </span>
+          </h1>
+          
+          <p className="text-xl md:text-2xl text-gray-800/80 max-w-2xl mx-auto mb-12 font-medium leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.5s' }}>
+            Természetes alapanyagokból, szívvel-lélekkel készült desszertek minden alkalomra.
+            <br className="hidden md:block"/> Mert minden nap megérdemel egy kis kényeztetést.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row gap-5 justify-center animate-fade-in-up" style={{ animationDelay: '0.7s' }}>
+             <a href="#menu" className="bg-[#E91E63] text-white px-10 py-4 rounded-full font-sans font-bold hover:bg-[#D81B60] transition-all shadow-xl shadow-[#E91E63]/30 hover:-translate-y-1 hover:scale-105">
+               Kínálatunk Megtekintése
+             </a>
+             <a href="#about" className="bg-white text-[#5D4037] px-10 py-4 rounded-full font-sans font-bold hover:bg-gray-50 transition-all shadow-lg hover:-translate-y-1 hover:scale-105">
+               Ismerj meg minket
+             </a>
+          </div>
+        </div>
+
+        {/* Scroll Indicator */}
+        <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+          <ChevronDown className="w-8 h-8 text-[#E91E63] opacity-60" />
+        </div>
+      </section>
+
+      {/* About Section */}
+      <section id="about" className="py-32 px-6 bg-white overflow-hidden">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid md:grid-cols-2 gap-20 items-center">
+            <div className="relative group">
+              <div className="absolute -top-6 -left-6 w-full h-full border-4 border-[#FF80AB]/30 rounded-[2rem] transition-transform duration-500 group-hover:translate-x-2 group-hover:translate-y-2"></div>
+              <img 
+                src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=1000&q=80" 
+                alt="Pék és Cukrászmunka" 
+                className="rounded-[2rem] shadow-2xl relative z-10 transform transition-transform duration-700 hover:scale-[1.02]"
+              />
+              {/* Floating Badge */}
+              <div className="absolute -bottom-10 -right-10 z-20 bg-white p-6 rounded-2xl shadow-xl animate-bounce-slow hidden lg:block">
+                <div className="text-center">
+                   <p className="text-4xl font-bold text-[#E91E63]">5+</p>
+                   <p className="text-sm font-sans text-gray-500 uppercase tracking-wider">Év Tapasztalat</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="space-y-8">
+              <h2 className="text-5xl font-bold text-[#5D4037] leading-tight">
+                A szenvedélyünk <br/>
+                <span className="text-[#E91E63] italic">a minőség</span>
+              </h2>
+              <p className="text-lg leading-relaxed text-[#795548] font-sans">
+                2018 óta készítjük desszertjeinket Budapest szívében. Hiszünk abban, hogy egy sütemény nemcsak étel, hanem élmény. Ezért kizárólag prémium belga csokoládét, termelői tejet és friss gyümölcsöket használunk.
+              </p>
+              
+              <div className="grid gap-6">
+                {[
+                  { text: '100% Természetes alapanyagok', icon: Heart },
+                  { text: 'Glutén- és laktózmentes opciók', icon: Star },
+                  { text: 'Egyedi tortarendelés 48 órán belül', icon: Clock }
+                ].map((item, i) => (
+                  <div key={i} className="flex items-center gap-4 p-4 rounded-xl bg-[#FFF5F5] border border-[#FF80AB]/20 transition-all hover:shadow-md hover:bg-[#fff0f0]">
+                    <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-[#E91E63] shadow-sm">
+                      <item.icon className="w-5 h-5" />
+                    </div>
+                    <span className="font-bold text-[#5D4037]">{item.text}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Menu Grid */}
+      <section id="menu" className="py-32 bg-[#FFF5F5]">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="text-center mb-20">
+            <h2 className="text-5xl font-bold mb-6 text-[#5D4037]">Legnépszerűbb Finomságok</h2>
+            <p className="text-[#795548] text-xl max-w-2xl mx-auto font-sans">
+              Válogasson kedvenc süteményeink közül, melyeket minden reggel frissen készítünk.
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
+            {[
+              { title: 'Macaron Válogatás', price: '3 490 Ft', img: 'https://images.unsplash.com/photo-1569864358642-9d1684040f43?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', tag: 'Best Seller' },
+              { title: 'Epres Sajttorta', price: '1 290 Ft', img: 'https://images.unsplash.com/photo-1533134242443-d4fd215305ad?auto=format&fit=crop&w=800&q=80', tag: null },
+              { title: 'Csokimousse', price: '1 490 Ft', img: 'https://images.unsplash.com/photo-1541783245831-57d6fb0926d3?auto=format&fit=crop&w=800&q=80', tag: 'Új' },
+              { title: 'Gyümölcstorta', price: '8 990 Ft', img: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?auto=format&fit=crop&w=800&q=80', tag: 'Rendelésre' },
+              { title: 'Cupcake Mix', price: '2 990 Ft', img: 'https://images.unsplash.com/photo-1519869325930-281384150729?auto=format&fit=crop&w=800&q=80', tag: null },
+              { title: 'Vajas Croissant', price: '890 Ft', img: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', tag: 'Friss' }
+            ].map((item, i) => (
+              <div key={i} className="group bg-white rounded-3xl p-4 shadow-md hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
+                <div className="overflow-hidden rounded-2xl mb-6 h-64 relative">
+                  <img 
+                    src={item.img} 
+                    alt={item.title} 
+                    className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" 
+                  />
+                  {item.tag && (
+                    <div className="absolute top-4 left-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-[#E91E63] uppercase tracking-wider shadow-sm">
+                      {item.tag}
+                    </div>
+                  )}
+                  {/* Quick Add Overlay */}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                    <button className="bg-white text-[#E91E63] px-6 py-2 rounded-full font-bold transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
+                      Kosárba
+                    </button>
+                  </div>
+                </div>
+                <div className="px-2 pb-2">
+                  <div className="flex justify-between items-start mb-2">
+                    <h3 className="text-2xl font-bold text-[#5D4037] group-hover:text-[#E91E63] transition-colors">{item.title}</h3>
+                    <span className="text-lg font-bold text-[#E91E63] bg-[#FFF5F5] px-3 py-1 rounded-lg">{item.price}</span>
+                  </div>
+                  <p className="text-gray-500 text-sm line-clamp-2">Krémes, ízletes finomság, amely elolvad a szádban.</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          
+          <div className="mt-16 text-center">
+            <button className="border-2 border-[#E91E63] text-[#E91E63] px-10 py-3 rounded-full font-bold hover:bg-[#E91E63] hover:text-white transition-all duration-300 uppercase tracking-wider text-sm">
+              Teljes étlap letöltése
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials (Simple) */}
+      <section className="py-24 bg-white">
+         <div className="max-w-4xl mx-auto px-6 text-center">
+            <Star className="w-10 h-10 text-yellow-400 fill-current mx-auto mb-6" />
+            <h2 className="text-4xl font-bold mb-8 text-[#5D4037]">Vendégeink mondták</h2>
+            <blockquote className="text-2xl italic text-gray-600 font-serif leading-relaxed mb-8">
+              "A legfinomabb macaron, amit valaha ettem! A pisztáciás egyszerűen mennyei. Mindenkinek csak ajánlani tudom a helyet, igazi ékszerdoboz."
+            </blockquote>
+            <cite className="font-bold text-[#E91E63] not-italic">— Kovács Anna, Budapest</cite>
+         </div>
+      </section>
+
+      {/* Contact & Footer */}
+      <section id="contact" className="bg-[#5D4037] text-white py-24 px-6 relative overflow-hidden">
+        {/* Background Pattern */}
+        <div className="absolute inset-0 opacity-5" style={{backgroundImage: 'radial-gradient(circle, #ffffff 2px, transparent 2px)', backgroundSize: '30px 30px'}}></div>
+
+        <div className="max-w-4xl mx-auto text-center relative z-10">
+          <h2 className="text-4xl font-bold mb-16">Látogass el hozzánk</h2>
+          
+          <div className="grid md:grid-cols-3 gap-12 mb-16">
+            <div className="flex flex-col items-center group">
+              <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
+                <MapPin className="w-8 h-8" />
+              </div>
+              <h4 className="font-bold text-xl mb-3">Címünk</h4>
+              <p className="text-white/70 leading-relaxed">1052 Budapest,<br/>Petőfi Sándor utca 12.</p>
+            </div>
+            <div className="flex flex-col items-center group">
+              <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
+                <Clock className="w-8 h-8" />
+              </div>
+              <h4 className="font-bold text-xl mb-3">Nyitvatartás</h4>
+              <p className="text-white/70 leading-relaxed">H-P: 08:00 - 19:00<br/>Szo-V: 09:00 - 16:00</p>
+            </div>
+            <div className="flex flex-col items-center group">
+              <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
+                <Phone className="w-8 h-8" />
+              </div>
+              <h4 className="font-bold text-xl mb-3">Kapcsolat</h4>
+              <p className="text-white/70 leading-relaxed">+36 1 234 5678<br/>hello@sweetcraving.hu</p>
+            </div>
+          </div>
+
+          <div className="flex justify-center space-x-8">
+            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Facebook className="w-8 h-8" /></a>
+            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Instagram className="w-8 h-8" /></a>
+            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Mail className="w-8 h-8" /></a>
+          </div>
+          
+          <div className="mt-16 pt-8 border-t border-white/10 text-white/40 text-sm font-sans">
+             &copy; 2024 SweetCraving. Ez egy demonstrációs weboldal a MotionWeb referenciáihoz.
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};