function MainComponent() { const [rates, setRates] = React.useState([]); const [testimonials, setTestimonials] = React.useState([]); const [trackingInfo, setTrackingInfo] = React.useState(null); const trackShipment = async (event)=>{ event.preventDefault(); const trackingNumber = event.target.tracking_number.value; // Logic to fetch tracking information goes here // Suppose we get the JSON response and set it in the state setTrackingInfo({ "status": "In Transit", "estimatedDelivery": "2023-05-10" }); }; const fetchRates = async ()=>{ // Logic to fetch shipping rates goes here // Suppose we get the JSON response and set it in the state setRates([ { "destination": "New York", "price": "500" }, { "destination": "Los Angeles", "price": "400" } ]); }; const fetchTestimonials = async ()=>{ // Logic to fetch testimonials goes here // Suppose we get the JSON response and set it in the state setTestimonials([ { "author": "John Doe", "content": "Great Service!" }, { "author": "Jane Smith", "content": "Fast and reliable." } ]); }; React.useEffect(()=>{ fetchRates(); fetchTestimonials(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full lg:h-screen", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-800 text-white p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex flex-wrap justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Freight Forwarder"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-wrap space-x-6", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Services")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Tools")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-green-600 font-roboto rounded-md hover:bg-green-700", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Get a Quote"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow container mx-auto p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white shadow-md p-6 rounded-lg mb-6", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Track Shipment"), /*#__PURE__*/ React.createElement("form", { onSubmit: trackShipment, className: "space-y-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "tracking-number", className: "font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Tracking Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "tracking-number", name: "tracking_number", className: "border-2 border-gray-300 p-2 rounded-md", placeholder: "Enter your tracking number", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-800 text-white font-roboto rounded-md hover:bg-blue-900", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Track"), trackingInfo && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-200 rounded-md", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "Status: ", trackingInfo.status), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "Estimated Delivery: ", trackingInfo.estimatedDelivery)))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Shipping Rates"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, rates.map((rate, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "Destination: ", rate.destination), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "Price: $", rate.price))))), /*#__PURE__*/ React.createElement("section", { className: "mt-6", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Testimonials"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-auto", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, testimonials.map((testimonial, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "min-w-[260px] p-4 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("blockquote", { __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, '"', testimonial.content, '"'), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, "- ", testimonial.author)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-blue-800 text-white p-4", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "© ", new Date().getFullYear(), " Freight Forwarder, Inc.")))); }