function ThreeDCity({ data = [ { category: "Income", value: 5000 }, { category: "Expenses", value: 3000 }, { category: "Savings", value: 2000 }, { category: "Investments", value: 1500 } ] }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[600px] bg-[#1a1a1a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)); } function ThreeDCityStory() { const sampleData = [ { category: "Income", value: 5000 }, { category: "Expenses", value: 3000 }, { category: "Savings", value: 2000 }, { category: "Investments", value: 1500 }, { category: "Debt", value: 1000 }, { category: "Emergency Fund", value: 2500 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ThreeDCity, { data: sampleData, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function ProgressBar({ progress = 0, color = "#00ff00" }) { const [mounted, setMounted] = useState(false); useEffect(()=>{ setMounted(true); }, []); return /*#__PURE__*/ React.createElement("div", { className: "relative h-[60px] w-[300px] transform-gpu perspective-[1000px]", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 rounded-lg bg-black/50 transform-gpu rotateX-[20deg]", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full rounded-lg transition-all duration-1000 ease-in-out shadow-[0_0_20px_rgba(0,255,0,0.7)]", style: { width: mounted ? `${progress}%` : "0%", background: `linear-gradient(90deg, ${color}55, ${color})` }, __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }))); } function ProgressBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-8 bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProgressBar, { progress: 25, color: "#00ff00", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 50, color: "#ff00ff", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 75, color: "#00ffff", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progress: 100, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function ThreeDChart({ type = "bar", data = [] }) { const [chartType, setChartType] = useState(type); const chartRef = useRef(null); const [hoveredItem, setHoveredItem] = useState(null); useEffect(()=>{ if (!chartRef.current) return; const ctx = chartRef.current.getContext("2d"); const myChart = new Chart(ctx, { type: chartType, data: { labels: data.map((d)=>d.label), datasets: [ { data: data.map((d)=>d.value), backgroundColor: [ "rgba(255, 99, 132, 0.8)", "rgba(54, 162, 235, 0.8)", "rgba(255, 206, 86, 0.8)", "rgba(75, 192, 192, 0.8)", "rgba(153, 102, 255, 0.8)" ], borderWidth: 1, hoverOffset: 4 } ] }, options: { responsive: true, plugins: { legend: { position: "top" }, title: { display: true, text: "3D Data Visualization" } }, animation: { animateRotate: true, animateScale: true } } }); return ()=>myChart.destroy(); }, [ chartType, data ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] p-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChartType("bar"), className: `px-4 py-2 rounded ${chartType === "bar" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Bar"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChartType("pie"), className: `px-4 py-2 rounded ${chartType === "pie" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Pie"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChartType("line"), className: `px-4 py-2 rounded ${chartType === "line" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Line")), /*#__PURE__*/ React.createElement("canvas", { ref: chartRef, className: "w-full", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this })); } function ThreeDChartStory() { const sampleData = [ { label: "January", value: 65 }, { label: "February", value: 59 }, { label: "March", value: 80 }, { label: "April", value: 81 }, { label: "May", value: 56 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 min-h-screen flex justify-center items-center", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("script", { src: "https://cdn.jsdelivr.net/npm/chart.js", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ThreeDChart, { data: sampleData, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); } function DashboardCard({ title, amount, change, trend }) { const [isDark, setIsDark] = useState(true); return /*#__PURE__*/ React.createElement("div", { className: `rounded-xl p-6 w-[320px] transition-all duration-300 ${isDark ? "bg-[#1a1a1a] shadow-[0_0_15px_rgba(0,255,255,0.3)]" : "bg-white shadow-lg"}`, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `font-inter text-lg ${isDark ? "text-white" : "text-[#1a1a1a]"}`, __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsDark(!isDark), className: "text-sm px-3 py-1 rounded-full border border-cyan-500 hover:bg-cyan-500/10", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isDark ? "fa-sun" : "fa-moon"} ${isDark ? "text-cyan-400" : "text-cyan-600"}`, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `text-3xl font-inter font-bold mb-2 ${isDark ? "text-cyan-400" : "text-cyan-600"}`, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "$", amount), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${trend === "up" ? "fa-arrow-up text-emerald-500" : "fa-arrow-down text-rose-500"} mr-1`, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${trend === "up" ? "text-emerald-500" : "text-rose-500"}`, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, change, "%"))); } function DashboardCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DashboardCard, { title: "Total Revenue", amount: "24,500", change: "12.5", trend: "up", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DashboardCard, { title: "Expenses", amount: "8,320", change: "3.2", trend: "down", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DashboardCard, { title: "Net Profit", amount: "16,180", change: "8.4", trend: "up", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isDark, setIsDark] = useState(true); return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${isDark ? "bg-[#121212]" : "bg-white"}`, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center p-6", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `font-poppins text-2xl ${isDark ? "text-white" : "text-black"}`, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line mr-2 text-[#0ff]", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }), "FinanceFlow"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsDark(!isDark), className: "text-[#0ff] hover:text-[#0ff]/80", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isDark ? "fa-sun" : "fa-moon"} text-xl`, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between gap-12", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `font-poppins text-5xl mb-6 ${isDark ? "text-white" : "text-black"}`, __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Track Your Money ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 27, columnNumber: 32 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#0ff]", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Like Never Before")), /*#__PURE__*/ React.createElement("p", { className: `font-poppins text-xl mb-8 ${isDark ? "text-gray-300" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Get real-time insights into your spending habits with our advanced tracking tools"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0ff] hover:bg-[#0ff]/80 text-black font-poppins px-8 py-3 rounded-lg shadow-[0_0_15px_rgba(0,255,255,0.5)]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Get Started Free")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 h-[500px]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 mt-24", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .animate-float { animation: float 3s ease-in-out infinite; } `)); }

Track Your Money Like Never Before

Track Your Money
Like Never Before