function MainComponent() { const headerText = "No need to work shot-by-shot"; const descriptionText = "Upload your CG character model to one shot or an entire scene and the system will automatically detect cuts and track the actor throughout the sequence."; const timelineImages = [ '/placeholder1.jpg', '/placeholder2.jpg', '/placeholder3.jpg' ]; const renderTimelineImages = timelineImages.map((src, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: `Sequence shot placeholder ${index + 1}`, className: "w-full h-auto rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), index === 1 && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-red-500 bg-opacity-25 rounded-xl", style: { clipPath: 'polygon(0 0, 60% 0, 40% 100%, 0% 100%)' }, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#010101] text-white", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-3", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, headerText), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, descriptionText), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A1A] p-8 rounded-3xl shadow-2xl overflow-hidden", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-scroll scrollbar-hide", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, renderTimelineImages), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "20", defaultValue: "10", name: "timeline", className: "range range-xs", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "flex items-center justify-center bg-[#262626] w-16 h-16 rounded-full text-4xl text-white", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "+")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, ` .range::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; background: #FFF; border-radius: 9999px; cursor: pointer; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); } .range::-webkit-slider-runnable-track { appearance: none; height: 4px; background: #FFF; cursor: pointer; } .range:active::-webkit-slider-thumb { background: #FE8C00; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } `)); }