init

components/ProcessSection.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { 
+  UserPlus, 
+  FileText, 
+  CreditCard, 
+  Layout, 
+  MessageSquare, 
+  CheckCircle, 
+  Globe, 
+  ShieldCheck 
+} from 'lucide-react';
+
+export const ProcessSection: React.FC = () => {
+  const steps = [
+    {
+      id: 1,
+      title: 'Regisztráció & fiók létrehozása',
+      description: 'Első lépésként létrehozod a fiókodat, ahol később minden rendelést és értesítést kezelni tudsz.',
+      icon: UserPlus
+    },
+    {
+      id: 2,
+      title: 'Kérdőív kitöltése',
+      description: 'Kitöltöd az irányított kérdőívet, amely alapján elkezdjük megtervezni a weboldalad.',
+      icon: FileText
+    },
+    {
+      id: 3,
+      title: 'Előleg fizetése',
+      description: 'A kérdőív után kifizeted az előleget Stripe-on keresztül, ezzel indul a fejlesztési folyamat.',
+      icon: CreditCard
+    },
+    {
+      id: 4,
+      title: 'Első verzió elkészítése',
+      description: 'Elkészítjük a bemutató weboldal első verzióját placeholder tartalmakkal.',
+      icon: Layout
+    },
+    {
+      id: 5,
+      title: 'Visszajelzés megadása',
+      description: 'Egy gyors űrlapon jelzed, hogy tetszik-e az irány, vagy milyen módosításokat szeretnél.',
+      icon: MessageSquare
+    },
+    {
+      id: 6,
+      title: 'Végleges rendelés & teljes fizetés',
+      description: 'A jóváhagyás után kifizeted a teljes árat, és elkészítjük a végleges, teljes funkcionalitású weboldalt.',
+      icon: CheckCircle
+    },
+    {
+      id: 7,
+      title: 'Domain csatlakoztatása',
+      description: 'A weboldal rákerül a megadott domainedre, és élesben is elérhetővé válik.',
+      icon: Globe
+    },
+    {
+      id: 8,
+      title: 'Fenntartás & támogatás',
+      description: 'A továbbiakban csak a fenntartási díjat kell fizetned, mi pedig gondoskodunk a stabil működésről.',
+      icon: ShieldCheck
+    }
+  ];
+
+  return (
+    <section className="py-24 bg-gray-50">
+      <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">Hogyan készül el a weboldalad?</h2>
+          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+            Átlátható folyamat, gyors és professzionális kivitelezés – pontosan tudni fogod, mire számíthatsz.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {steps.map((step) => (
+            <div 
+              key={step.id} 
+              className="bg-white rounded-[24px] p-8 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group border border-gray-100/50"
+            >
+              <div className="flex justify-between items-start mb-6">
+                <div className="text-blue-500 transition-transform duration-300 group-hover:scale-110">
+                  <step.icon className="w-8 h-8 stroke-[1.5]" />
+                </div>
+                <div className="w-8 h-8 rounded-full border-2 border-[#A78BFA] flex items-center justify-center text-sm font-bold text-[#A78BFA] group-hover:bg-[#A78BFA] group-hover:text-white transition-colors duration-300">
+                  {step.id}
+                </div>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h3>
+              <p className="text-gray-500 text-sm leading-relaxed">{step.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};