Email Sorter Beta

Ich habe soweit automatisiert the Emails sortieren aber ich muss noch schauen was es fur bugs es gibt wenn die app online  ist deswegen wurde ich mit diesen Commit die website veroffentlichen obwohjl es sein konnte  das es noch nicht fertig ist und verkaufs bereit

client/src/components/landing/HowItWorks.tsx

@@ -0,0 +1,111 @@
+import { 
+  UserPlus, 
+  Link2, 
+  Sparkles, 
+  PartyPopper,
+  ArrowDown 
+} from 'lucide-react'
+
+const steps = [
+  {
+    icon: UserPlus,
+    step: "01",
+    title: "Create account",
+    description: "Sign up for free in less than 60 seconds. No credit card required.",
+  },
+  {
+    icon: Link2,
+    step: "02",
+    title: "Connect email",
+    description: "Connect Gmail or Outlook with one click. Secure OAuth authentication.",
+  },
+  {
+    icon: Sparkles,
+    step: "03",
+    title: "AI analyzes",
+    description: "Our AI learns your email patterns and creates personalized sorting rules.",
+  },
+  {
+    icon: PartyPopper,
+    step: "04",
+    title: "Enjoy Inbox Zero",
+    description: "Sit back and enjoy a clean inbox – automatically.",
+  },
+]
+
+export function HowItWorks() {
+  return (
+    <section id="how-it-works" className="py-24 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section header */}
+        <div className="text-center mb-16">
+          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
+            4 steps to a{' '}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-accent-500">
+              clean inbox
+            </span>
+          </h2>
+          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+            Get started in minutes – no technical knowledge required.
+          </p>
+        </div>
+
+        {/* Steps */}
+        <div className="relative">
+          {/* Connection line */}
+          <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-primary-200 via-primary-400 to-primary-200 -translate-y-1/2" />
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {steps.map((item, index) => (
+              <StepCard key={index} {...item} />
+            ))}
+          </div>
+        </div>
+
+        {/* CTA */}
+        <div className="mt-16 text-center">
+          <div className="inline-flex flex-col items-center">
+            <ArrowDown className="w-8 h-8 text-primary-400 animate-bounce mb-4" />
+            <p className="text-slate-600 mb-2">Ready to get started?</p>
+            <a 
+              href="/register"
+              className="text-primary-600 font-semibold hover:text-primary-700 transition-colors"
+            >
+              Try it free now →
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+interface StepCardProps {
+  icon: React.ElementType
+  step: string
+  title: string
+  description: string
+}
+
+function StepCard({ icon: Icon, step, title, description }: StepCardProps) {
+  return (
+    <div className="relative">
+      {/* Card */}
+      <div className="bg-slate-50 rounded-2xl p-6 text-center hover:bg-white hover:shadow-xl transition-all duration-300 border border-transparent hover:border-slate-200">
+        {/* Step number */}
+        <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-primary-500 to-primary-600 text-white text-sm font-bold px-4 py-1 rounded-full shadow-md">
+          {step}
+        </div>
+        
+        {/* Icon */}
+        <div className="w-16 h-16 mx-auto mt-4 mb-4 rounded-2xl bg-white shadow-md flex items-center justify-center">
+          <Icon className="w-8 h-8 text-primary-600" />
+        </div>
+        
+        {/* Content */}
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">{title}</h3>
+        <p className="text-slate-600 text-sm">{description}</p>
+      </div>
+    </div>
+  )
+}