import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import HeroSection from './components/HeroSection';
import AboutDelivery from './components/AboutDelivery';
import DeliveryOptions from './components/DeliveryOptions';
import MonitorDelivery from './components/MonitorDelivery';
import SecureCheckout from './components/SecureCheckout';
import ShippingDetails from './components/ShippingDetails';
import DeliveryForm from './components/DeliveryForm';
import OrderTracking from './components/OrderTracking';
import './App.css';

function Home() {
  return (
    <>
      <HeroSection />
      <AboutDelivery />
      <MonitorDelivery />
      <SecureCheckout />
      <DeliveryOptions />
      <ShippingDetails />
      <Footer/>
    </>
  );
}

function App() {
  return (
    <div className="App">
      <Header />
      <Routes>
        {/* Parent Route */}
        <Route path="/" element={<Home />} />

        {/* Nested Routes */}
        <Route path="/delivery-form" element={<DeliveryForm />} />
        <Route path="/order-tracking" element={<OrderTracking />} />
        
      </Routes>
    </div>
  );
}

export default App;
