import Header from "./components/Header";
import Herosection from "./components/HeroSection";

import Footer from "./components/Footer";
import Features from "./components/Features";
import WorkflowSection from "./components/WorkflowSection";
import Howto from "./components/Howto";

function App() {
  return (
    <div>
      <div className="min-h-screen flex flex-col">
        <Header />

        <main className="flex-grow space-y-12 pt-16 md:pt-20">
          {/* Add id attributes here for scrolling */}
          <section id="overview">
            <Herosection />
          </section>

          <section id="features">
            <Features />
          </section>
          <section id="howto">
            <Howto />
          </section>

          <section id="workflow">
            <WorkflowSection />
          </section>
        </main>

        <Footer />
      </div>
    </div>
  );
}

export default App;
