Workflow Builder App

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen p-8">
      <header className="bg-white shadow-lg rounded-lg p-6 mb-8">
        <h1 className="text-3xl font-bold text-gray-800">Workflow Builder</h1>
        <p className="text-gray-600 mt-2">Easily create and manage your workflows</p>
      </header>

      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-semibold text-gray-800">Step 1: Define</h2>
          <p className="text-gray-600 mt-2">Define your workflow steps.</p>
          <img src="https://placehold.co/300X200" alt="Define workflow" className="mt-4 rounded-lg" />
        </div>
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-semibold text-gray-800">Step 2: Configure</h2>
          <p className="text-gray-600 mt-2">Configure the settings for each step.</p>
          <img src="https://placehold.co/300X200" alt="Configure workflow" className="mt-4 rounded-lg" />
        </div>
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-semibold text-gray-800">Step 3: Execute</h2>
          <p className="text-gray-600 mt-2">Execute and monitor your workflow.</p>
          <img src="https://placehold.co/300X200" alt="Execute workflow" className="mt-4 rounded-lg" />
        </div>
      </section>

      <section className="mt-8 bg-white rounded-lg shadow-lg p-6">
        <h2 className="text-2xl font-bold text-gray-800">Workflow Overview</h2>
        <p className="text-gray-600 mt-2">Get a visual overview of your workflow.</p>
        <img src="https://placehold.co/600X300" alt="Workflow overview" className="mt-4 rounded-lg" />
      </section>

      <section className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-semibold text-gray-800">Analytics</h2>
          <p className="text-gray-600 mt-2">Track the performance of your workflows.</p>
          <img src="https://placehold.co/300X200" alt="Analytics" className="mt-4 rounded-lg" />
        </div>
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-semibold text-gray-800">Notifications</h2>
          <p className="text-gray-600 mt-2">Stay updated with real-time notifications.</p>
          <img src="https://placehold.co/300X200" alt="Notifications" className="mt-4 rounded-lg" />
        </div>
      </section>

      <footer className="mt-8 text-center text-gray-600">
        © 2025 Workflow Builder. All rights reserved.
      </footer>
    </div>
  );
};

export default App;