From a11568b7c79546dc16e8a7f7a99700d35845aa32 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 3 Jun 2026 20:20:04 +0000
Subject: [PATCH] Bob AI: Added How It Works section to outline onboarding
 steps

---
 src/pages/HomePage.tsx                     |  4 +++-
 src/pages/HomePage/sections/HowItWorks.tsx | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/HomePage/sections/HowItWorks.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 6a38631..b0751e0 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -12,12 +12,14 @@ import SocialProofSection from './HomePage/sections/SocialProof';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import HowItWorksSection from './HomePage/sections/HowItWorks';export default function HomePage(): React.JSX.Element {
   return (
     <>
       <HomeSection />
       <AboutSection />
       <ProductsSection />
+      <HowItWorksSection />
       <WhyUsSection />
       <TestimonialsSection />
       <SocialProofSection />
diff --git a/src/pages/HomePage/sections/HowItWorks.tsx b/src/pages/HomePage/sections/HowItWorks.tsx
new file mode 100644
index 0000000..3a4c0f8
--- /dev/null
+++ b/src/pages/HomePage/sections/HowItWorks.tsx
@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (FeaturesDetailedSteps).
+
+import React from 'react';
+import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
+
+export default function HowItWorksSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="how-it-works" id="how-it-works">
+      <FeaturesDetailedSteps
+        title="Get started in 3 simple steps"
+        steps={[{"tag":"Step 1","imageSrc":"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop","description":"Enter your details and verify your email to get instant access to our platform.","title":"Create your account","subtitle":"Sign up in seconds"},{"subtitle":"Tailor it to your needs","imageSrc":"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop","tag":"Step 2","title":"Configure your workspace","description":"Set up your preferences, invite team members, and connect your favorite tools."},{"subtitle":"See results immediately","imageSrc":"https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop","tag":"Step 3","title":"Start achieving goals","description":"Launch your first project and track your progress with our intuitive dashboard."}]}
+        description="Our onboarding process is designed to be quick and painless so you can start seeing value immediately."
+        tag="How It Works"
+      />
+    </div>
+  );
+}
-- 
2.49.1