diff --git a/packages/editor/src/state/demoFile/landing.uimixproject b/packages/editor/src/state/demoFile/landing.uimixproject index f1d782d2..695a521e 100644 --- a/packages/editor/src/state/demoFile/landing.uimixproject +++ b/packages/editor/src/state/demoFile/landing.uimixproject @@ -7,509 +7,509 @@ "name": "landing", "parent": "project" }, - "1Bxgjd2GQ86kNMXigGvXUt": { + "1Bxo3HEwaoSRm3fbP6iw7h": { "type": "component", "index": 0, "name": "Header", "parent": "1nCc1J7YeWZSJ7Zd8SQdRtMYtfKeLtCINWUsm0B8ows" }, - "1Bxgjd2GdNHeFAJpsakdh6": { + "1Bxo3HEwjFCrCXwG8GXA2B": { "type": "frame", "index": 0, - "parent": "1Bxgjd2GQ86kNMXigGvXUt" + "parent": "1Bxo3HEwaoSRm3fbP6iw7h" }, - "1Bxgjd2Grm181c4DYhQYjp": { + "1Bxo3HEwY3t3tTwgLbPECS": { "type": "frame", "index": 0, "name": "Frame 102", - "parent": "1Bxgjd2GdNHeFAJpsakdh6" + "parent": "1Bxo3HEwjFCrCXwG8GXA2B" }, - "1Bxgjd2GvBdm89R8WBFJPQ": { + "1Bxo3HEwek7vmCw1B2sgBJ": { "type": "svg", "index": 0, "name": "Frame 178", - "parent": "1Bxgjd2Grm181c4DYhQYjp" + "parent": "1Bxo3HEwY3t3tTwgLbPECS" }, - "1Bxgjd2H7R7GJZ5jovTL5f": { + "1Bxo3HEwXFDzty6arQDSpy": { "type": "text", "index": 1, "name": "UIMix", - "parent": "1Bxgjd2Grm181c4DYhQYjp" + "parent": "1Bxo3HEwY3t3tTwgLbPECS" }, - "1Bxgjd2GxjmgZ4c3x3UJN7": { + "1Bxo3HEwcsjzR6Qnr2YbWL": { "type": "frame", "index": 1, "name": "Frame 179", - "parent": "1Bxgjd2GdNHeFAJpsakdh6" + "parent": "1Bxo3HEwjFCrCXwG8GXA2B" }, - "1Bxgjd2HFnxQS1XSx3pBaP": { + "1Bxo3HEwhWPZdYDr7JiHUb": { "type": "frame", "index": 0, "name": "Frame 3", - "parent": "1Bxgjd2GxjmgZ4c3x3UJN7" + "parent": "1Bxo3HEwcsjzR6Qnr2YbWL" }, - "1Bxgjd2HBoXcheeopEHoCF": { + "1Bxo3HEwthyWCNjUwpu1Hq": { "type": "text", "index": 0, "name": "Sign In", - "parent": "1Bxgjd2HFnxQS1XSx3pBaP" + "parent": "1Bxo3HEwhWPZdYDr7JiHUb" }, - "1Bxgjd2HQdNrKsNYFsXGKW": { + "1Bxo3HEwvsjGzuMANGc1pb": { "type": "frame", "index": 1, "name": "Frame 4", - "parent": "1Bxgjd2GxjmgZ4c3x3UJN7" + "parent": "1Bxo3HEwcsjzR6Qnr2YbWL" }, - "1Bxgjd2HbVKGFGpYmvpdU1": { + "1Bxo3HEwwgrxVMSP9K5EL5": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjd2HQdNrKsNYFsXGKW" + "parent": "1Bxo3HEwvsjGzuMANGc1pb" }, - "1Bxgjd2HTnzLd1JT1MGHT1": { + "1Bxo3HEwm1XFFakST4ePXZ": { "type": "frame", "index": 2, "name": "Frame 180", - "parent": "1Bxgjd2GdNHeFAJpsakdh6" + "parent": "1Bxo3HEwjFCrCXwG8GXA2B" }, - "1Bxgjd2HbT1nQwSy6zZxUw": { + "1Bxo3HEwtRdAqFWrq9g8PK": { "type": "text", "index": 0, "name": "Features", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2HcjnH7PQYD5WQwo": { + "1Bxo3HEwteGJZLPiqQSj7k": { "type": "text", "index": 1, "name": "Pricing", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2HeT8Ze5Qva3ifHy": { + "1Bxo3HEwmbZjnxbBGcdMkw": { "type": "text", "index": 2, "name": "Docs", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2HWA3RusdmbQY5cH": { + "1Bxo3HEwqNPDqjSBqtQ983": { "type": "text", "index": 3, "name": "GitHub", - "parent": "1Bxgjd2HTnzLd1JT1MGHT1" + "parent": "1Bxo3HEwm1XFFakST4ePXZ" }, - "1Bxgjd2Hh7WyMA2CEtKm9d": { + "1Bxo3HEwn4znsQb9rHgYgM": { "type": "component", "index": 1, "name": "Landing", "parent": "1nCc1J7YeWZSJ7Zd8SQdRtMYtfKeLtCINWUsm0B8ows" }, - "1Bxgjd2HpmZbQkteJnQeea": { + "1Bxo3HEwtXADmSCS9Hweu7": { "type": "frame", "index": 0, - "parent": "1Bxgjd2Hh7WyMA2CEtKm9d" + "parent": "1Bxo3HEwn4znsQb9rHgYgM" }, - "1Bxgjd2HmAVYzkZzR5gMmQ": { + "1Bxo3HEwkbso7LRYCMWB7p": { "type": "instance", "index": 0, "name": "Frame", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2J1vrHmy4CSKuoyf": { + "1Bxo3HEwy1ZiDyiEyyXEmg": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2J8aPXCQfLxVmvX6": { + "1Bxo3HEwpZt5nDm1HVyLmC": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Hwz6BzxErwEg15A": { + "1Bxo3HEwyrToCtknPhsJej": { "type": "image", "index": 0, "name": "image 2", - "parent": "1Bxgjd2J8aPXCQfLxVmvX6" + "parent": "1Bxo3HEwpZt5nDm1HVyLmC" }, - "1Bxgjd2JErKK24jJUPhYv1": { + "1Bxo3HEwwvuYhjctEipp32": { "type": "text", "index": 1, "name": "Revolutionize Your Web Design and Development Workflow", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2JsRnWBA8gT2YgSm": { + "1Bxo3HEx6YseDN2xgBmS66": { "type": "text", "index": 2, "name": "UIMix is a open-source design tool that combines intuitive editing, React integration, AI assistance, and advanced design tokens.", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Jpk4oRFruHrgBdy": { + "1Bxo3HEx9fRua5T5NiRPeF": { "type": "frame", "index": 3, "name": "Frame 4", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Jpe5QFt4omGt5mm": { + "1Bxo3HExB7eyPeh8xMrGkb": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1Bxgjd2Jpk4oRFruHrgBdy" + "parent": "1Bxo3HEx9fRua5T5NiRPeF" }, - "1Bxgjd2JkjKVV8KWfCdTK2": { + "1Bxo3HEx1N8rAiDyenFNpA": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjd2Jpe5QFt4omGt5mm" + "parent": "1Bxo3HExB7eyPeh8xMrGkb" }, - "1Bxgjd2K3o3NQ78FVmRvH9": { + "1Bxo3HEx6a6KL4AThx8p68": { "type": "image", "index": 4, "name": "image 1", - "parent": "1Bxgjd2J1vrHmy4CSKuoyf" + "parent": "1Bxo3HEwy1ZiDyiEyyXEmg" }, - "1Bxgjd2Jv7tWS8aoJvnETh": { + "1Bxo3HEx3qhvbF8h4NTX6k": { "type": "frame", "index": 2, "name": "Frame 19", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2KNNpy4g9bAHsBHD": { + "1Bxo3HEx7S9n267UsT86np": { "type": "frame", "index": 0, "name": "Frame 181", - "parent": "1Bxgjd2Jv7tWS8aoJvnETh" + "parent": "1Bxo3HEx3qhvbF8h4NTX6k" }, - "1Bxgjd2KMDvofAyH4423We": { + "1Bxo3HEx89eUwtrPyLhzKC": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2KD3XPnWWxv76R1i": { + "1Bxo3HEx2rwBxKWA3kBjX9": { "type": "frame", "index": 0, "name": "Frame 5", - "parent": "1Bxgjd2KMDvofAyH4423We" + "parent": "1Bxo3HEx89eUwtrPyLhzKC" }, - "1Bxgjd2KWa4rL2LcZxDnDx": { + "1Bxo3HEwzh8eNzHqYrtxqu": { "type": "svg", "index": 0, "name": "heroicons:pencil-square", - "parent": "1Bxgjd2KD3XPnWWxv76R1i" + "parent": "1Bxo3HEx2rwBxKWA3kBjX9" }, - "1Bxgjd2Kd345sYFBryN13n": { + "1Bxo3HExC2BiqrEAc5e8Sm": { "type": "text", "index": 1, "name": "Figma-like Intuitive Editing", - "parent": "1Bxgjd2KMDvofAyH4423We" + "parent": "1Bxo3HEx89eUwtrPyLhzKC" }, - "1Bxgjd2KbFo8z98m6KbX1u": { + "1Bxo3HExAJL3CYVM9TimQG": { "type": "text", "index": 2, "name": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", - "parent": "1Bxgjd2KMDvofAyH4423We" + "parent": "1Bxo3HEx89eUwtrPyLhzKC" }, - "1Bxgjd2KUe2tk7M4mrCwSN": { + "1Bxo3HExGdhQnocMPaDFYL": { "type": "frame", "index": 1, "name": "Frame 14", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2Kb4NVVY7WWSxnwY": { + "1Bxo3HExLEKNw7GKfU3REo": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2KUe2tk7M4mrCwSN" + "parent": "1Bxo3HExGdhQnocMPaDFYL" }, - "1Bxgjd2KmRGVs7iHY4dWbt": { + "1Bxo3HExEmYfgSkkVWj7W5": { "type": "svg", "index": 0, "name": "heroicons:code-bracket", - "parent": "1Bxgjd2Kb4NVVY7WWSxnwY" + "parent": "1Bxo3HExLEKNw7GKfU3REo" }, - "1Bxgjd2KuNkZjkJ7o4j5xM": { + "1Bxo3HExHiAB5wnDk5xJQM": { "type": "text", "index": 1, "name": "React Components Import/Export", - "parent": "1Bxgjd2KUe2tk7M4mrCwSN" + "parent": "1Bxo3HExGdhQnocMPaDFYL" }, - "1Bxgjd2KwYDMjpoy2yLuJs": { + "1Bxo3HExEgfoomc1XjmTgt": { "type": "text", "index": 2, "name": "Seamlessly work with React components, boosting your design-to-development workflow.", - "parent": "1Bxgjd2KUe2tk7M4mrCwSN" + "parent": "1Bxo3HExGdhQnocMPaDFYL" }, - "1Bxgjd2KxQUN8RiCur3chD": { + "1Bxo3HExUMDMYJzACMpb9j": { "type": "frame", "index": 2, "name": "Frame 15", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2L3h1fqKneUN5sLb": { + "1Bxo3HExMgU2TQdJLPNfJv": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2KxQUN8RiCur3chD" + "parent": "1Bxo3HExUMDMYJzACMpb9j" }, - "1Bxgjd2L5ww7kehFWqYu41": { + "1Bxo3HExL8Y6FZLkQCoEJ6": { "type": "svg", "index": 0, "name": "heroicons:cloud", - "parent": "1Bxgjd2L3h1fqKneUN5sLb" + "parent": "1Bxo3HExMgU2TQdJLPNfJv" }, - "1Bxgjd2L96wvsHKQVY4sT1": { + "1Bxo3HExS3khwbwp6Ye7gB": { "type": "text", "index": 1, "name": "Collaboration for Everyone", - "parent": "1Bxgjd2KxQUN8RiCur3chD" + "parent": "1Bxo3HExUMDMYJzACMpb9j" }, - "1Bxgjd2L9pp3htkUcqb2UQ": { + "1Bxo3HExRfrnUCcSE8nNuY": { "type": "text", "index": 2, "name": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.", - "parent": "1Bxgjd2KxQUN8RiCur3chD" + "parent": "1Bxo3HExUMDMYJzACMpb9j" }, - "1Bxgjd2LHVPjzc8ZTzCPyf": { + "1Bxo3HExU7nx7GoXqbYx8m": { "type": "frame", "index": 3, "name": "Frame 16", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2LCzZ9Q1qAs4ooBy": { + "1Bxo3HExPWJ8kLWp3rHWuU": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2LHVPjzc8ZTzCPyf" + "parent": "1Bxo3HExU7nx7GoXqbYx8m" }, - "1Bxgjd2LQEExt28hFeqAAY": { + "1Bxo3HExKe9UTKM87i9Fhu": { "type": "svg", "index": 0, "name": "heroicons:computer-desktop", - "parent": "1Bxgjd2LCzZ9Q1qAs4ooBy" + "parent": "1Bxo3HExPWJ8kLWp3rHWuU" }, - "1Bxgjd2LbpNsVWPCfQuPWS": { + "1Bxo3HExhRLLwNRvKpVW5q": { "type": "text", "index": 1, "name": "Offline Editing Experience", - "parent": "1Bxgjd2LHVPjzc8ZTzCPyf" + "parent": "1Bxo3HExU7nx7GoXqbYx8m" }, - "1Bxgjd2LSjE1qSYvW62agx": { + "1Bxo3HExdwKaRmChDADoHD": { "type": "text", "index": 2, "name": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.", - "parent": "1Bxgjd2LHVPjzc8ZTzCPyf" + "parent": "1Bxo3HExU7nx7GoXqbYx8m" }, - "1Bxgjd2LcifAyxogLn9pyj": { + "1Bxo3HExccQsJa3HV9Q2Z8": { "type": "frame", "index": 4, "name": "Frame 17", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2Lafu7CCNnWybbQi": { + "1Bxo3HExg1jUixnT5t3Lxn": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2LcifAyxogLn9pyj" + "parent": "1Bxo3HExccQsJa3HV9Q2Z8" }, - "1Bxgjd2LWJLH2eDySgN2q2": { + "1Bxo3HExe188r4M5oNJUob": { "type": "svg", "index": 0, "name": "carbon:machine-learning", - "parent": "1Bxgjd2Lafu7CCNnWybbQi" + "parent": "1Bxo3HExg1jUixnT5t3Lxn" }, - "1Bxgjd2Lagwb9ZoP1Y8KRx": { + "1Bxo3HExiEusDEmD1uaiyz": { "type": "text", "index": 1, "name": "AI Assistance", - "parent": "1Bxgjd2LcifAyxogLn9pyj" + "parent": "1Bxo3HExccQsJa3HV9Q2Z8" }, - "1Bxgjd2LWpGABGccTH6pVq": { + "1Bxo3HExf3sLDf5pV5hgnu": { "type": "text", "index": 2, "name": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", - "parent": "1Bxgjd2LcifAyxogLn9pyj" + "parent": "1Bxo3HExccQsJa3HV9Q2Z8" }, - "1Bxgjd2LR47ZN2eR7QaWqd": { + "1Bxo3HExiwb6ZVzU98R6sq": { "type": "frame", "index": 5, "name": "Frame 18", - "parent": "1Bxgjd2KNNpy4g9bAHsBHD" + "parent": "1Bxo3HEx7S9n267UsT86np" }, - "1Bxgjd2Le4Mvko2sXpkvjf": { + "1Bxo3HExXQoLiWv5usTbyb": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjd2LR47ZN2eR7QaWqd" + "parent": "1Bxo3HExiwb6ZVzU98R6sq" }, - "1Bxgjd2LcowyLm3PaumMJN": { + "1Bxo3HExiCEw3ZkSjfaEgM": { "type": "svg", "index": 0, "name": "carbon:logo-figma", - "parent": "1Bxgjd2Le4Mvko2sXpkvjf" + "parent": "1Bxo3HExXQoLiWv5usTbyb" }, - "1Bxgjd2LgGt71Wy94T2ocq": { + "1Bxo3HExWZmVEFUeCcztSq": { "type": "text", "index": 1, "name": "Figma Integration", - "parent": "1Bxgjd2LR47ZN2eR7QaWqd" + "parent": "1Bxo3HExiwb6ZVzU98R6sq" }, - "1Bxgjd2Lp7eeKERnDwMvx1": { + "1Bxo3HExdMFSLTMPVcYc6X": { "type": "text", "index": 2, "name": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", - "parent": "1Bxgjd2LR47ZN2eR7QaWqd" + "parent": "1Bxo3HExiwb6ZVzU98R6sq" }, - "1Bxgjd2LsSh4vyLn6chfVb": { + "1Bxo3HExY5uNzEBKy2a9aA": { "type": "frame", "index": 3, "name": "Frame", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2LfkkmXUn6TxdiyT": { + "1Bxo3HExcUxqKW6frAWW7e": { "type": "text", "index": 0, "name": "Open Source", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2LkRJ4c87sxLRZUJ": { + "1Bxo3HExrRFKPjm2cg2edK": { "type": "text", "index": 1, "name": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options. Self-host both components for greater control over your design environment and data security.", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2LsBJUQg8u6Zxa4w": { + "1Bxo3HExvAGJ5UnxKHVuhf": { "type": "frame", "index": 2, "name": "Frame 3", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2LozA1kTiA2hZfzi": { + "1Bxo3HExwSWdzg15ajE1Sx": { "type": "text", "index": 0, "name": "Explore GitHub repo", - "parent": "1Bxgjd2LsBJUQg8u6Zxa4w" + "parent": "1Bxo3HExvAGJ5UnxKHVuhf" }, - "1Bxgjd2M3XuMTDDuXeuVoV": { + "1Bxo3HEyCLxpuhsdxiDJkC": { "type": "text", "index": 3, "name": "How It Works", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2M2XaxGrqZ3uRpzz": { + "1Bxo3HEy45S1JFzvwRtvFv": { "type": "frame", "index": 4, "name": "Frame", - "parent": "1Bxgjd2LsSh4vyLn6chfVb" + "parent": "1Bxo3HExY5uNzEBKy2a9aA" }, - "1Bxgjd2M3p7eQZVRTTjFmh": { + "1Bxo3HEy1kp3j6SxRPYHaG": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1Bxgjd2M2XaxGrqZ3uRpzz" + "parent": "1Bxo3HEy45S1JFzvwRtvFv" }, - "1Bxgjd2M2tskb4i8ULpX3i": { + "1Bxo3HEyDfttCvoiT5sgKk": { "type": "text", "index": 0, "name": "A. Start Your Project", - "parent": "1Bxgjd2M3p7eQZVRTTjFmh" + "parent": "1Bxo3HEy1kp3j6SxRPYHaG" }, - "1Bxgjd2M2sMYQDHckZhtDh": { + "1Bxo3HEy7wSYt25brVBwyB": { "type": "text", "index": 1, "name": "Sign up for a free account or log in. Create a new project or import an existing Figma design. Organize your components and design tokens in the user-friendly interface.", - "parent": "1Bxgjd2M3p7eQZVRTTjFmh" + "parent": "1Bxo3HEy1kp3j6SxRPYHaG" }, - "1Bxgjd2Lu73xjDu4xfiDmo": { + "1Bxo3HEyB553C1vqqpMqhK": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjd2M2XaxGrqZ3uRpzz" + "parent": "1Bxo3HEy45S1JFzvwRtvFv" }, - "1Bxgjd2M2mwyQPNN3v57qu": { + "1Bxo3HEyBV3j3MsYrxGuaD": { "type": "text", "index": 0, "name": "B. Design & Develop", - "parent": "1Bxgjd2Lu73xjDu4xfiDmo" + "parent": "1Bxo3HEyB553C1vqqpMqhK" }, - "1Bxgjd2MFHpDTi88GvPwmD": { + "1Bxo3HEy6tXw2CotSaPrTC": { "type": "text", "index": 1, "name": "Utilize Figma-like editing tools to create and modify designs. Seamlessly import React components into your UIMix project. Leverage AI assistance to efficiently generate and refine your content.", - "parent": "1Bxgjd2Lu73xjDu4xfiDmo" + "parent": "1Bxo3HEyB553C1vqqpMqhK" }, - "1Bxgjd2MDUGSz1cdjsrfVh": { + "1Bxo3HEyCmXtfM725vndsS": { "type": "frame", "index": 2, "name": "Frame", - "parent": "1Bxgjd2M2XaxGrqZ3uRpzz" + "parent": "1Bxo3HEy45S1JFzvwRtvFv" }, - "1Bxgjd2MNKrDZHuGc1QvfH": { + "1Bxo3HExzmZJNUzCpQCF1e": { "type": "text", "index": 0, "name": "C. Collaborate & Publish", - "parent": "1Bxgjd2MDUGSz1cdjsrfVh" + "parent": "1Bxo3HEyCmXtfM725vndsS" }, - "1Bxgjd2MKP2zGxJR89UvsU": { + "1Bxo3HEyNApucEKERgGCSC": { "type": "text", "index": 1, "name": "Collaborate using the online editor or work offline for an optimized development experience. Integrate with GitHub for streamlined version control. Easily import UIMix components into React apps or export final designs back to Figma.", - "parent": "1Bxgjd2MDUGSz1cdjsrfVh" + "parent": "1Bxo3HEyCmXtfM725vndsS" }, - "1Bxgjd2MWE64QrwWr1qGEZ": { + "1Bxo3HEyLvryZ4ztLa7J2J": { "type": "frame", "index": 4, "name": "Frame 21", - "parent": "1Bxgjd2HpmZbQkteJnQeea" + "parent": "1Bxo3HEwtXADmSCS9Hweu7" }, - "1Bxgjd2MdATnuH8GA2PgkB": { + "1Bxo3HEyLzHAd2RpycDCCd": { "type": "image", "index": 0, "name": "image 4", - "parent": "1Bxgjd2MWE64QrwWr1qGEZ" + "parent": "1Bxo3HEyLvryZ4ztLa7J2J" }, - "1Bxgjd2MmEaW2gY8rSvhqe": { + "1Bxo3HEyLfuDY7fUvnThJF": { "type": "text", "index": 1, "name": "Ready to revolutionize your web design workflow?", - "parent": "1Bxgjd2MWE64QrwWr1qGEZ" + "parent": "1Bxo3HEyLvryZ4ztLa7J2J" }, - "1Bxgjd2MrvGfrHMjd7Ydtz": { + "1Bxo3HEyTnF7hNTpmHTRnU": { "type": "frame", "index": 2, "name": "Frame 20", - "parent": "1Bxgjd2MWE64QrwWr1qGEZ" + "parent": "1Bxo3HEyLvryZ4ztLa7J2J" }, - "1Bxgjd2MiiFs1D5m4bQ5eM": { + "1Bxo3HEyKyCGPjUXGwKXPg": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1Bxgjd2MrvGfrHMjd7Ydtz" + "parent": "1Bxo3HEyTnF7hNTpmHTRnU" }, - "1Bxgjd2MkEWQ1gmUuo6DUD": { + "1Bxo3HEyLzPs1dsrfpGm7P": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjd2MiiFs1D5m4bQ5eM" + "parent": "1Bxo3HEyKyCGPjUXGwKXPg" }, - "1Bxgjd2MkDAbitUvfHaWpu": { + "1Bxo3HEyJp9quCTUPPATdP": { "type": "variant", "index": 1, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjd2Hh7WyMA2CEtKm9d" + "parent": "1Bxo3HEwn4znsQb9rHgYgM" } }, "styles": { - "1Bxgjd2GvBdm89R8WBFJPQ": { + "1Bxo3HEwek7vmCw1B2sgBJ": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n\n\n" }, - "1Bxgjd2H7R7GJZ5jovTL5f": { + "1Bxo3HEwXFDzty6arQDSpy": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "UIMix", "fontFamily": "Satoshi", "fontWeight": 900, @@ -519,7 +519,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2Grm181c4DYhQYjp": { + "1Bxo3HEwY3t3tTwgLbPECS": { "hidden": false, "position": { "left": 48, "top": 24 }, "width": "hug", @@ -542,12 +542,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2HBoXcheeopEHoCF": { + "1Bxo3HEwthyWCNjUwpu1Hq": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Sign In", "fontFamily": "Satoshi", "fontWeight": 700, @@ -557,7 +557,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2HFnxQS1XSx3pBaP": { + "1Bxo3HEwhWPZdYDr7JiHUb": { "hidden": false, "width": "hug", "height": "hug", @@ -587,12 +587,12 @@ "paddingBottom": 6.5, "paddingLeft": 14.5 }, - "1Bxgjd2HbVKGFGpYmvpdU1": { + "1Bxo3HEwwgrxVMSP9K5EL5": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -602,7 +602,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2HQdNrKsNYFsXGKW": { + "1Bxo3HEwvsjGzuMANGc1pb": { "hidden": false, "width": "hug", "height": "hug", @@ -628,7 +628,7 @@ "paddingBottom": 8, "paddingLeft": 16 }, - "1Bxgjd2GxjmgZ4c3x3UJN7": { + "1Bxo3HEwcsjzR6Qnr2YbWL": { "hidden": false, "position": { "top": 16, "right": 47.99984677551083 }, "width": 247, @@ -651,12 +651,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2HbT1nQwSy6zZxUw": { + "1Bxo3HEwtRdAqFWrq9g8PK": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Features", "fontFamily": "Satoshi", "fontWeight": 500, @@ -666,12 +666,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HcjnH7PQYD5WQwo": { + "1Bxo3HEwteGJZLPiqQSj7k": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Pricing", "fontFamily": "Satoshi", "fontWeight": 500, @@ -681,12 +681,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HeT8Ze5Qva3ifHy": { + "1Bxo3HEwmbZjnxbBGcdMkw": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Docs", "fontFamily": "Satoshi", "fontWeight": 500, @@ -696,12 +696,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HWA3RusdmbQY5cH": { + "1Bxo3HEwqNPDqjSBqtQ983": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "GitHub", "fontFamily": "Satoshi", "fontWeight": 500, @@ -711,7 +711,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjd2HTnzLd1JT1MGHT1": { + "1Bxo3HEwm1XFFakST4ePXZ": { "hidden": false, "width": "hug", "height": "hug", @@ -733,7 +733,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2GdNHeFAJpsakdh6": { + "1Bxo3HEwjFCrCXwG8GXA2B": { "position": { "left": 20, "top": 20 }, "width": 1183, "height": 72, @@ -744,11 +744,11 @@ "paddingTop": 24, "paddingBottom": 24 }, - "1Bxgjd2HmAVYzkZzR5gMmQ": { + "1Bxo3HEwkbso7LRYCMWB7p": { "width": { "min": 0 }, - "mainComponent": "1Bxgjd2GQ86kNMXigGvXUt" + "mainComponent": "1Bxo3HEwaoSRm3fbP6iw7h" }, - "1Bxgjd2Hwz6BzxErwEg15A": { + "1Bxo3HEwyrToCtknPhsJej": { "hidden": false, "position": { "left": 343, "top": 45 }, "width": 750, @@ -762,7 +762,7 @@ "shadows": [], "imageHash": "XMIUgNq9VxH1FiVdc4M95ZcfqaSP3aF07GtbcGHi9AY" }, - "1Bxgjd2J8aPXCQfLxVmvX6": { + "1Bxo3HEwpZt5nDm1HVyLmC": { "locked": true, "position": { "left": 0, "top": 0, "right": 0 }, "width": { "min": 0 }, @@ -771,14 +771,14 @@ "layout": "flex", "flexJustify": "center" }, - "1Bxgjd2JErKK24jJUPhYv1": { + "1Bxo3HEwwvuYhjctEipp32": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1F2937" }], "opacity": 1, "marginTop": 96, "marginBottom": 48, + "color": "#1F2937", "textContent": "Revolutionize Your Web Design\nand Development Workflow", "fontFamily": "Satoshi", "fontWeight": 900, @@ -788,13 +788,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2JsRnWBA8gT2YgSm": { + "1Bxo3HEx6YseDN2xgBmS66": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#6b7280" }], "opacity": 1, "marginBottom": 48, + "color": "#6b7280", "textContent": "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens.", "fontFamily": "Inter", "fontWeight": 400, @@ -804,12 +804,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2JkjKVV8KWfCdTK2": { + "1Bxo3HEx1N8rAiDyenFNpA": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -819,7 +819,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2Jpe5QFt4omGt5mm": { + "1Bxo3HExB7eyPeh8xMrGkb": { "hidden": false, "width": "hug", "height": "hug", @@ -845,7 +845,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1Bxgjd2Jpk4oRFruHrgBdy": { + "1Bxo3HEx9fRua5T5NiRPeF": { "hidden": false, "width": "hug", "height": "hug", @@ -868,8 +868,9 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2K3o3NQ78FVmRvH9": { + "1Bxo3HEx6a6KL4AThx8p68": { "hidden": false, + "position": { "left": 360, "top": 581 }, "width": { "min": 0, "max": 720 }, "height": "hug", "topLeftRadius": 10, @@ -890,7 +891,7 @@ "marginBottom": 64, "imageHash": "1yKf5NvwGW-XtLSBDlS3GqZfbEGnLshgQrjyQJImqaM" }, - "1Bxgjd2J1vrHmy4CSKuoyf": { + "1Bxo3HEwy1ZiDyiEyyXEmg": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -899,12 +900,12 @@ "paddingRight": 24, "paddingLeft": 24 }, - "1Bxgjd2KWa4rL2LcZxDnDx": { + "1Bxo3HEwzh8eNzHqYrtxqu": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2KD3XPnWWxv76R1i": { + "1Bxo3HEx2rwBxKWA3kBjX9": { "hidden": false, "width": "hug", "height": "hug", @@ -927,12 +928,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2Kd345sYFBryN13n": { + "1Bxo3HExC2BiqrEAc5e8Sm": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma-like Intuitive Editing", "fontFamily": "Satoshi", "fontWeight": 700, @@ -942,12 +943,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KbFo8z98m6KbX1u": { + "1Bxo3HExAJL3CYVM9TimQG": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", "fontFamily": "Inter", "fontWeight": 400, @@ -957,7 +958,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KMDvofAyH4423We": { + "1Bxo3HEx89eUwtrPyLhzKC": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -980,12 +981,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2KmRGVs7iHY4dWbt": { + "1Bxo3HExEmYfgSkkVWj7W5": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2Kb4NVVY7WWSxnwY": { + "1Bxo3HExLEKNw7GKfU3REo": { "hidden": false, "width": "hug", "height": "hug", @@ -1008,12 +1009,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2KuNkZjkJ7o4j5xM": { + "1Bxo3HExHiAB5wnDk5xJQM": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "React Components Import/Export", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1023,12 +1024,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KwYDMjpoy2yLuJs": { + "1Bxo3HExEgfoomc1XjmTgt": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Seamlessly work with React components, boosting your design-to-development workflow.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1038,7 +1039,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KUe2tk7M4mrCwSN": { + "1Bxo3HExGdhQnocMPaDFYL": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1061,12 +1062,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2L5ww7kehFWqYu41": { + "1Bxo3HExL8Y6FZLkQCoEJ6": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2L3h1fqKneUN5sLb": { + "1Bxo3HExMgU2TQdJLPNfJv": { "hidden": false, "width": "hug", "height": "hug", @@ -1089,12 +1090,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2L96wvsHKQVY4sT1": { + "1Bxo3HExS3khwbwp6Ye7gB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Collaboration for Everyone", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1104,12 +1105,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2L9pp3htkUcqb2UQ": { + "1Bxo3HExRfrnUCcSE8nNuY": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1119,7 +1120,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2KxQUN8RiCur3chD": { + "1Bxo3HExUMDMYJzACMpb9j": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1142,12 +1143,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2LQEExt28hFeqAAY": { + "1Bxo3HExKe9UTKM87i9Fhu": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2LCzZ9Q1qAs4ooBy": { + "1Bxo3HExPWJ8kLWp3rHWuU": { "hidden": false, "width": "hug", "height": "hug", @@ -1170,12 +1171,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2LbpNsVWPCfQuPWS": { + "1Bxo3HExhRLLwNRvKpVW5q": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Offline Editing Experience", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1185,12 +1186,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LSjE1qSYvW62agx": { + "1Bxo3HExdwKaRmChDADoHD": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1200,7 +1201,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LHVPjzc8ZTzCPyf": { + "1Bxo3HExU7nx7GoXqbYx8m": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1223,12 +1224,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2LWJLH2eDySgN2q2": { + "1Bxo3HExe188r4M5oNJUob": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n" }, - "1Bxgjd2Lafu7CCNnWybbQi": { + "1Bxo3HExg1jUixnT5t3Lxn": { "hidden": false, "width": "hug", "height": "hug", @@ -1251,12 +1252,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2Lagwb9ZoP1Y8KRx": { + "1Bxo3HExiEusDEmD1uaiyz": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "AI Assistance", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1266,12 +1267,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LWpGABGccTH6pVq": { + "1Bxo3HExf3sLDf5pV5hgnu": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", "fontFamily": "Inter", "fontWeight": 400, @@ -1281,7 +1282,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LcifAyxogLn9pyj": { + "1Bxo3HExccQsJa3HV9Q2Z8": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1304,12 +1305,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2LcowyLm3PaumMJN": { + "1Bxo3HExiCEw3ZkSjfaEgM": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjd2Le4Mvko2sXpkvjf": { + "1Bxo3HExXQoLiWv5usTbyb": { "hidden": false, "width": "hug", "height": "hug", @@ -1332,12 +1333,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjd2LgGt71Wy94T2ocq": { + "1Bxo3HExWZmVEFUeCcztSq": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma Integration", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1347,12 +1348,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2Lp7eeKERnDwMvx1": { + "1Bxo3HExdMFSLTMPVcYc6X": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", "fontFamily": "Inter", "fontWeight": 400, @@ -1362,7 +1363,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2LR47ZN2eR7QaWqd": { + "1Bxo3HExiwb6ZVzU98R6sq": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1385,7 +1386,7 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjd2KNNpy4g9bAHsBHD": { + "1Bxo3HEx7S9n267UsT86np": { "hidden": false, "width": { "min": 0, "max": 1200 }, "height": { "min": 0 }, @@ -1408,8 +1409,8 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2MkDAbitUvfHaWpu:1Bxgjd2KNNpy4g9bAHsBHD": { "gridColumnCount": 1 }, - "1Bxgjd2Jv7tWS8aoJvnETh": { + "1Bxo3HEyJp9quCTUPPATdP:1Bxo3HEx7S9n267UsT86np": { "gridColumnCount": 1 }, + "1Bxo3HEx3qhvbF8h4NTX6k": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -1432,13 +1433,13 @@ "paddingBottom": 48, "paddingLeft": 24 }, - "1Bxgjd2LfkkmXUn6TxdiyT": { + "1Bxo3HExcUxqKW6frAWW7e": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 24, + "color": "#1f2937", "textContent": "Open Source", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1448,13 +1449,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2LkRJ4c87sxLRZUJ": { + "1Bxo3HExrRFKPjm2cg2edK": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, "marginBottom": 48, + "color": "#4b5563", "textContent": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security.", "fontFamily": "Inter", "fontWeight": 400, @@ -1464,12 +1465,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2LozA1kTiA2hZfzi": { + "1Bxo3HExwSWdzg15ajE1Sx": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Explore GitHub repo", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1479,7 +1480,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2LsBJUQg8u6Zxa4w": { + "1Bxo3HExvAGJ5UnxKHVuhf": { "hidden": false, "width": "hug", "height": "hug", @@ -1510,13 +1511,13 @@ "paddingBottom": 10.5, "paddingLeft": 22.5 }, - "1Bxgjd2M3XuMTDDuXeuVoV": { + "1Bxo3HEyCLxpuhsdxiDJkC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 72, + "color": "#1f2937", "textContent": "How It Works", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1526,13 +1527,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2M2tskb4i8ULpX3i": { + "1Bxo3HEyDfttCvoiT5sgKk": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 26, + "color": "#1f2937", "textContent": "A. Start Your Project", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1542,12 +1543,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2M2sMYQDHckZhtDh": { + "1Bxo3HEy7wSYt25brVBwyB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface.", "fontFamily": "Inter", "fontWeight": 400, @@ -1557,19 +1558,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2M3p7eQZVRTTjFmh": { + "1Bxo3HEy1kp3j6SxRPYHaG": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1Bxgjd2M2mwyQPNN3v57qu": { + "1Bxo3HEyBV3j3MsYrxGuaD": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "B. Design & Develop", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1579,12 +1580,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2MFHpDTi88GvPwmD": { + "1Bxo3HEy6tXw2CotSaPrTC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content.", "fontFamily": "Inter", "fontWeight": 400, @@ -1594,19 +1595,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2Lu73xjDu4xfiDmo": { + "1Bxo3HEyB553C1vqqpMqhK": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1Bxgjd2MNKrDZHuGc1QvfH": { + "1Bxo3HExzmZJNUzCpQCF1e": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "C. Collaborate & Publish", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1616,12 +1617,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2MKP2zGxJR89UvsU": { + "1Bxo3HEyNApucEKERgGCSC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma.", "fontFamily": "Inter", "fontWeight": 400, @@ -1631,13 +1632,13 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjd2MDUGSz1cdjsrfVh": { + "1Bxo3HEyCmXtfM725vndsS": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1Bxgjd2M2XaxGrqZ3uRpzz": { + "1Bxo3HEy45S1JFzvwRtvFv": { "width": { "min": 0, "max": 1280 }, "height": "hug", "layout": "flex", @@ -1645,7 +1646,7 @@ "rowGap": 24, "columnGap": 24 }, - "1Bxgjd2LsSh4vyLn6chfVb": { + "1Bxo3HExY5uNzEBKy2a9aA": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -1656,7 +1657,7 @@ "paddingBottom": 128, "paddingLeft": 24 }, - "1Bxgjd2MdATnuH8GA2PgkB": { + "1Bxo3HEyLzHAd2RpycDCCd": { "hidden": false, "position": { "left": -23, "top": -368 }, "width": 1500, @@ -1670,13 +1671,13 @@ "shadows": [], "imageHash": "DGLFxM8eMqBjHUQYEekprnB3xC-f5uvLxL7x2odVAEU" }, - "1Bxgjd2MmEaW2gY8rSvhqe": { + "1Bxo3HEyLfuDY7fUvnThJF": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, "marginBottom": 48, + "color": "#ffffff", "textContent": "Ready to revolutionize your web design workflow?", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1686,12 +1687,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2MkEWQ1gmUuo6DUD": { + "1Bxo3HEyLzPs1dsrfpGm7P": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#3b82f6" }], "opacity": 1, + "color": "#3b82f6", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1701,7 +1702,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjd2MiiFs1D5m4bQ5eM": { + "1Bxo3HEyKyCGPjUXGwKXPg": { "hidden": false, "width": "hug", "height": "hug", @@ -1727,7 +1728,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1Bxgjd2MrvGfrHMjd7Ydtz": { + "1Bxo3HEyTnF7hNTpmHTRnU": { "hidden": false, "width": "hug", "height": "hug", @@ -1752,7 +1753,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjd2MWE64QrwWr1qGEZ": { + "1Bxo3HEyLvryZ4ztLa7J2J": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -1769,7 +1770,7 @@ "paddingTop": 96, "paddingBottom": 96 }, - "1Bxgjd2HpmZbQkteJnQeea": { + "1Bxo3HEwtXADmSCS9Hweu7": { "hidden": false, "position": { "left": 20, "top": 200 }, "width": 1440, @@ -1786,7 +1787,7 @@ "flexDirection": "y", "flexAlign": "center" }, - "1Bxgjd2MkDAbitUvfHaWpu": { + "1Bxo3HEyJp9quCTUPPATdP": { "position": { "left": 1500, "top": 200 }, "width": 720 } diff --git a/packages/editor/src/views/inspector/style/TextPane.tsx b/packages/editor/src/views/inspector/style/TextPane.tsx index c27fe6be..314dea12 100644 --- a/packages/editor/src/views/inspector/style/TextPane.tsx +++ b/packages/editor/src/views/inspector/style/TextPane.tsx @@ -1,81 +1,62 @@ import { observer } from "mobx-react-lite"; import formatSizeIcon from "@iconify-icons/ic/format-size"; import formatLineSpacingIcon from "@iconify-icons/ic/format-line-spacing"; -import formatAlignLeftIcon from "@iconify-icons/ic/format-align-left"; -import formatAlignCenterIcon from "@iconify-icons/ic/format-align-center"; -import formatAlignRightIcon from "@iconify-icons/ic/format-align-right"; -import formatAlignJustifyIcon from "@iconify-icons/ic/format-align-justify"; -import verticalAlignTopIcon from "@iconify-icons/ic/vertical-align-top"; -import verticalAlignCenterIcon from "@iconify-icons/ic/vertical-align-center"; -import verticalAlignBottomIcon from "@iconify-icons/ic/vertical-align-bottom"; import spaceBarIcon from "@iconify-icons/ic/space-bar"; +import edgeTopIcon from "@seanchas116/design-icons/json/edge-top.json"; import { InspectorHeading } from "../components/InspectorHeading"; import { InspectorNumberInput } from "./inputs/InspectorNumberInput"; import { InspectorPane } from "../components/InspectorPane"; -import { InspectorToggleGroup } from "./inputs/InspectorToggleGroup"; -import { ToggleGroupItem } from "@uimix/foundation/src/components"; +import { AlignmentEdit } from "@uimix/foundation/src/components"; import * as Data from "@uimix/model/src/data/v1"; import { InspectorTargetContext } from "../components/InspectorTargetContext"; import { projectState } from "../../../state/ProjectState"; import { InspectorComboBox } from "./inputs/InspectorComboBox"; import googleFonts from "@uimix/foundation/src/fonts/GoogleFonts.json"; +import { ColorInput } from "../components/ColorInput"; +import { sameOrMixed, sameOrNone } from "@uimix/foundation/src/utils/Mixed"; +import { ColorRef } from "@uimix/model/src/models"; +import { action } from "mobx"; const googleFontOptions = googleFonts.items.map((item) => ({ value: item.family, text: item.family, })); -const textAlignOptions: ToggleGroupItem[] = [ - { - value: "start", - icon: formatAlignLeftIcon, - }, - { - value: "center", - icon: formatAlignCenterIcon, - }, - { - value: "end", - icon: formatAlignRightIcon, - }, - { - value: "justify", - icon: formatAlignJustifyIcon, - }, -]; - -const verticalAlignOptions: ToggleGroupItem[] = [ - { - value: "start", - icon: verticalAlignTopIcon, - }, - { - value: "center", - icon: verticalAlignCenterIcon, - }, - { - value: "end", - icon: verticalAlignBottomIcon, - }, -]; - export const TextPane: React.FC = observer(function TextPane() { - const textSelectables = projectState.selectedSelectables.filter( - (s) => s.node.type === "text" + const selectables = projectState.selectedSelectables.filter( + (s) => s.node.type === "text" || s.node.type === "frame" ); - if (textSelectables.length === 0) { + if (selectables.length === 0) { return null; } + // TODO: Add InspectorColorInput? + const color = sameOrNone(selectables.map((s) => s.style.color)); + return ( - +
+ { + for (const selectable of selectables) { + selectable.style.color = color?.toJSON() ?? "#000000"; + } + })} + onChangeEnd={action(() => { + projectState.undoManager.stopCapturing(); + })} + /> s.style.fontFamily} set={(s, value) => { @@ -151,22 +132,95 @@ export const TextPane: React.FC = observer(function TextPane() { }} />
- s.style.textHorizontalAlign} - set={(s, value) => { - s.style.textHorizontalAlign = value ?? "start"; - }} - /> - s.style.textVerticalAlign} - set={(s, value) => { - s.style.textVerticalAlign = value ?? "start"; - }} - /> + ); }); + +const TextAlignEdit = observer(function TextAlignEdit() { + const selectables = projectState.selectedSelectables.filter( + (s) => s.node.type === "text" + ); + if (selectables.length === 0) { + return null; + } + + const align = sameOrMixed( + selectables.map((s) => s.style.textHorizontalAlign) + ); + const justify = sameOrMixed( + selectables.map((s) => s.style.textVerticalAlign) + ); + + return ( +
+ ({ value: s.style.paddingTop })} + set={(s, value) => { + s.style.paddingTop = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingRight })} + set={(s, value) => { + s.style.paddingRight = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingBottom })} + set={(s, value) => { + s.style.paddingBottom = value?.value ?? 0; + }} + /> + ({ value: s.style.paddingLeft })} + set={(s, value) => { + s.style.paddingLeft = value?.value ?? 0; + }} + /> + { + for (const selectable of selectables) { + selectable.style.textHorizontalAlign = align ?? "start"; + selectable.style.textVerticalAlign = + justify && justify !== "spaceBetween" ? justify : "start"; + } + projectState.undoManager.stopCapturing(); + })} + /> +
+ ); +}); diff --git a/packages/elements-react/src/style/StyleProps.ts b/packages/elements-react/src/style/StyleProps.ts index 670a0354..642b6d88 100644 --- a/packages/elements-react/src/style/StyleProps.ts +++ b/packages/elements-react/src/style/StyleProps.ts @@ -63,6 +63,7 @@ export interface StyleProps { paddingLeft: number; // text + color: string; textContent: string; fontFamily: string; fontWeight: number; @@ -124,6 +125,7 @@ export const defaultStyle: StyleProps = { // text + color: "#000000", textContent: "", fontFamily: "Inter", fontWeight: 400, diff --git a/packages/elements-react/src/style/buildNodeCSS.ts b/packages/elements-react/src/style/buildNodeCSS.ts index e4843a8a..1a357f3d 100644 --- a/packages/elements-react/src/style/buildNodeCSS.ts +++ b/packages/elements-react/src/style/buildNodeCSS.ts @@ -160,51 +160,48 @@ export function buildNodeCSS( } else { cssStyle.display = "block"; } - cssStyle.paddingLeft = `${style.paddingLeft}px`; - cssStyle.paddingRight = `${style.paddingRight}px`; - cssStyle.paddingTop = `${style.paddingTop}px`; - cssStyle.paddingBottom = `${style.paddingBottom}px`; } - if (nodeType === "frame" || nodeType === "image" || nodeType === "svg") { - const fills = style.fills; - cssStyle.background = fills.length ? fills[0].solid : "transparent"; - cssStyle.borderStyle = "solid"; - cssStyle.borderColor = - (style.border && style.border.solid) ?? "transparent"; - cssStyle.borderTopWidth = `${style.borderTopWidth}px`; - cssStyle.borderRightWidth = `${style.borderRightWidth}px`; - cssStyle.borderBottomWidth = `${style.borderBottomWidth}px`; - cssStyle.borderLeftWidth = `${style.borderLeftWidth}px`; - - cssStyle.borderTopLeftRadius = `${style.topLeftRadius}px`; - cssStyle.borderTopRightRadius = `${style.topRightRadius}px`; - cssStyle.borderBottomRightRadius = `${style.bottomRightRadius}px`; - cssStyle.borderBottomLeftRadius = `${style.bottomLeftRadius}px`; - - const shadows = style.shadows; - if (shadows.length === 0) { - cssStyle.boxShadow = "none"; - } else { - cssStyle.boxShadow = shadows - .map((shadow) => { - const x = `${shadow.x}px`; - const y = `${shadow.y}px`; - const blur = `${shadow.blur}px`; - const spread = `${shadow.spread}px`; - const color = shadow.color; - return `${x} ${y} ${blur} ${spread} ${color}`; - }) - .join(", "); - } + cssStyle.paddingLeft = `${style.paddingLeft}px`; + cssStyle.paddingRight = `${style.paddingRight}px`; + cssStyle.paddingTop = `${style.paddingTop}px`; + cssStyle.paddingBottom = `${style.paddingBottom}px`; + + const fills = style.fills; + cssStyle.background = fills.length ? fills[0].solid : "transparent"; + cssStyle.borderStyle = "solid"; + cssStyle.borderColor = (style.border && style.border.solid) ?? "transparent"; + cssStyle.borderTopWidth = `${style.borderTopWidth}px`; + cssStyle.borderRightWidth = `${style.borderRightWidth}px`; + cssStyle.borderBottomWidth = `${style.borderBottomWidth}px`; + cssStyle.borderLeftWidth = `${style.borderLeftWidth}px`; + + cssStyle.borderTopLeftRadius = `${style.topLeftRadius}px`; + cssStyle.borderTopRightRadius = `${style.topRightRadius}px`; + cssStyle.borderBottomRightRadius = `${style.bottomRightRadius}px`; + cssStyle.borderBottomLeftRadius = `${style.bottomLeftRadius}px`; + + const shadows = style.shadows; + if (shadows.length === 0) { + cssStyle.boxShadow = "none"; + } else { + cssStyle.boxShadow = shadows + .map((shadow) => { + const x = `${shadow.x}px`; + const y = `${shadow.y}px`; + const blur = `${shadow.blur}px`; + const spread = `${shadow.spread}px`; + const color = shadow.color; + return `${x} ${y} ${blur} ${spread} ${color}`; + }) + .join(", "); } if (nodeType === "text") { cssStyle.whiteSpace = "break-spaces"; cssStyle.display = "flex"; cssStyle.flexDirection = "column"; - const fills = style.fills; - cssStyle.color = fills.length ? fills[0].solid : "transparent"; + cssStyle.color = style.color; cssStyle.fontFamily = style.fontFamily; cssStyle.fontSize = `${style.fontSize}px`; cssStyle.fontWeight = style.fontWeight; diff --git a/packages/model/src/data/v1/style.ts b/packages/model/src/data/v1/style.ts index 7bbb3de6..c1a09c38 100644 --- a/packages/model/src/data/v1/style.ts +++ b/packages/model/src/data/v1/style.ts @@ -153,6 +153,7 @@ export const Style = z.object({ // text + color: Color, textContent: z.string(), fontFamily: z.string(), fontWeight: z.number(), diff --git a/packages/model/src/file/ProjectEmitter.ts b/packages/model/src/file/ProjectEmitter.ts index b5b76200..802f10ad 100644 --- a/packages/model/src/file/ProjectEmitter.ts +++ b/packages/model/src/file/ProjectEmitter.ts @@ -342,6 +342,10 @@ export class PageEmitter { paddingBottom: style.paddingBottom, paddingLeft: style.paddingLeft, + color: + style.color !== undefined + ? this.transformColor(style.color) + : undefined, textContent: style.textContent, fontFamily: style.fontFamily, fontWeight: style.fontWeight, diff --git a/packages/model/src/file/ProjectLoader.ts b/packages/model/src/file/ProjectLoader.ts index 4dbc8318..fa7bc601 100644 --- a/packages/model/src/file/ProjectLoader.ts +++ b/packages/model/src/file/ProjectLoader.ts @@ -324,6 +324,10 @@ class PageLoader { paddingBottom: style.paddingBottom, paddingLeft: style.paddingLeft, + color: + style.color !== undefined + ? this.transformColor(style.color) + : undefined, textContent: style.textContent, fontFamily: style.fontFamily, fontWeight: style.fontWeight, diff --git a/packages/model/src/file/types.ts b/packages/model/src/file/types.ts index 40d7858d..f5d6e4d5 100644 --- a/packages/model/src/file/types.ts +++ b/packages/model/src/file/types.ts @@ -10,6 +10,7 @@ import { TextHorizontalAlign, TextVerticalAlign, VariantCondition, + Color, } from "../data/v1"; import { z } from "zod"; import Babel from "@babel/standalone"; @@ -62,6 +63,7 @@ export const BaseStyleProps = z.object({ // text + color: Color, textContent: z.string(), fontFamily: z.string(), fontWeight: z.number(), diff --git a/packages/model/src/models/Selectable.ts b/packages/model/src/models/Selectable.ts index cbdcef47..943c6a98 100644 --- a/packages/model/src/models/Selectable.ts +++ b/packages/model/src/models/Selectable.ts @@ -692,6 +692,7 @@ export class Selectable { ...style, fills: style.fills.map(resolveFill), border: style.border && resolveFill(style.border), + color: resolveColor(style.color ?? "#000000"), shadows: style.shadows.map((shadow) => ({ ...shadow, color: resolveColor(shadow.color), diff --git a/packages/model/src/models/Style.ts b/packages/model/src/models/Style.ts index b30e94d7..7e63f2e7 100644 --- a/packages/model/src/models/Style.ts +++ b/packages/model/src/models/Style.ts @@ -51,6 +51,7 @@ export const defaultStyle: Data.Style = { // text + color: "#000000", textContent: "", fontFamily: "Inter", fontWeight: 400, diff --git a/packages/model/src/models/__fixtures__/project.uimixproject b/packages/model/src/models/__fixtures__/project.uimixproject index 80c15865..3b48a9b3 100644 --- a/packages/model/src/models/__fixtures__/project.uimixproject +++ b/packages/model/src/models/__fixtures__/project.uimixproject @@ -7,34 +7,34 @@ "name": "src/button", "parent": "project" }, - "1Bxgjgs6sCdp9Np51fcYL6": { + "1Bxo3C6pTEEXvWVaps2hMw": { "type": "component", "index": 0, "name": "Button", "parent": "v4qeOqqGkIYPNtJL8baUycDvv-NSbsgGzexl_3LR9Fo" }, - "1Bxgjgs74468hXW4Lsmyro": { + "1Bxo3C6pa9C96vm68m18nx": { "type": "frame", "index": 0, - "parent": "1Bxgjgs6sCdp9Np51fcYL6" + "parent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs78B7Q9WygLinw8N": { + "1Bxo3C6pbVJspdKo4tuhLV": { "type": "text", "index": 0, "name": "Text", - "parent": "1Bxgjgs74468hXW4Lsmyro" + "parent": "1Bxo3C6pa9C96vm68m18nx" }, - "1Bxgjgs6uDAKz2qq16i1NL": { + "1Bxo3C6pqc4xbTk8Z2drp1": { "type": "variant", "index": 1, "condition": { "type": "hover" }, - "parent": "1Bxgjgs6sCdp9Np51fcYL6" + "parent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs75jx7aNfgBLMn8c": { + "1Bxo3C6pvojtTetfkk3huT": { "type": "variant", "index": 2, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjgs6sCdp9Np51fcYL6" + "parent": "1Bxo3C6pTEEXvWVaps2hMw" }, "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM": { "type": "page", @@ -42,188 +42,188 @@ "name": "src/components", "parent": "project" }, - "1Bxgjgs75hMvadhoSBw4rj": { + "1Bxo3C6pxb5nNRiefxWSxd": { "type": "component", "index": 0, "name": "Stack", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs6xzDgHWiWd7tyjF": { + "1Bxo3C6pwdpFFY9hnHbfti": { "type": "frame", "index": 0, - "parent": "1Bxgjgs75hMvadhoSBw4rj" + "parent": "1Bxo3C6pxb5nNRiefxWSxd" }, - "1Bxgjgs6t3QbM3uq6iA3ix": { + "1Bxo3C6q5CsPDw71dZmJW5": { "type": "frame", "index": 0, "name": "Item 0", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs72smms8A9Pjz3Zd": { + "1Bxo3C6q4W6uYwxiTXCL8U": { "type": "frame", "index": 1, "name": "Item 1", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs71H6rJEo5phXEEv": { + "1Bxo3C6qHa6aMpCgDtYBdx": { "type": "frame", "index": 2, "name": "Hidden Item", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7FTZaV7jVq7sTa9": { + "1Bxo3C6qLz7gdZgaGrNuRe": { "type": "frame", "index": 3, "name": "Item 2", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7KPs4W48eRiv6Nt": { + "1Bxo3C6qLFwDcz4KpdL3U9": { "type": "text", "index": 4, "name": "Text", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7FnK31vXBsavCrv": { + "1Bxo3C6qN64gYU4TjxC2if": { "type": "instance", "index": 5, "name": "Button", - "parent": "1Bxgjgs6xzDgHWiWd7tyjF" + "parent": "1Bxo3C6pwdpFFY9hnHbfti" }, - "1Bxgjgs7LtP5HkiMnqMdbq": { + "1Bxo3C6qejwmEDxYnZYZEY": { "type": "component", "index": 1, "name": "Page", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs7MQ7TMPGiatLM8k": { + "1Bxo3C6qfV8LfTN9p731cN": { "type": "frame", "index": 0, - "parent": "1Bxgjgs7LtP5HkiMnqMdbq" + "parent": "1Bxo3C6qejwmEDxYnZYZEY" }, - "1Bxgjgs7GgYtwxcyAZD4he": { + "1Bxo3C6qY7WnohJCkr3eMv": { "type": "foreign", "index": 0, "name": "Header", - "parent": "1Bxgjgs7MQ7TMPGiatLM8k" + "parent": "1Bxo3C6qfV8LfTN9p731cN" }, - "1Bxgjgs78a1gqzQDDQuJYL": { + "1Bxo3C6qdMNKdMgmukbnc9": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjgs7MQ7TMPGiatLM8k" + "parent": "1Bxo3C6qfV8LfTN9p731cN" }, - "1Bxgjgs7FYYSZbbXtbLqBc": { + "1Bxo3C6qTXiqYV49t8Qadf": { "type": "foreign", "index": 0, "name": "Button", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7HhEZjievv2PuAk": { + "1Bxo3C6qXVvsUXyAsaMmhW": { "type": "instance", "index": 1, "name": "Instance", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7H4kVHE231YZi4r": { + "1Bxo3C6qu8s5yoCCir1e6V": { "type": "image", "index": 2, "name": "Image", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7BRL3UmPLBcesrM": { + "1Bxo3C6qtdohAawrPuA17r": { "type": "instance", "index": 3, "name": "Stack", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7LtBXJa9Pdvk1YE": { + "1Bxo3C6qoMVRdjkQmWuySH": { "type": "foreign", "index": 4, "name": "MUIButton", - "parent": "1Bxgjgs78a1gqzQDDQuJYL" + "parent": "1Bxo3C6qdMNKdMgmukbnc9" }, - "1Bxgjgs7DVpp12i6fyBE1X": { + "1Bxo3C6qkXC6fHzarkygcj": { "type": "variant", "index": 1, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjgs7LtP5HkiMnqMdbq" + "parent": "1Bxo3C6qejwmEDxYnZYZEY" }, - "1Bxgjgs7HdMzLPSxH4SrCy": { + "1Bxo3C6qn2aLH46VJJ4hv3": { "type": "component", "index": 2, "name": "Card", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs7FB3RchpL7L2Dci": { + "1Bxo3C6qpD8RvxoCkSuKLB": { "type": "frame", "index": 0, - "parent": "1Bxgjgs7HdMzLPSxH4SrCy" + "parent": "1Bxo3C6qn2aLH46VJJ4hv3" }, - "1Bxgjgs7MSq1dB1msbhSKh": { + "1Bxo3C6qhq3kVxjJcdgT9C": { "type": "frame", "index": 0, "name": "icon", - "parent": "1Bxgjgs7FB3RchpL7L2Dci" + "parent": "1Bxo3C6qpD8RvxoCkSuKLB" }, - "1Bxgjgs7T3CudFWxUkwgXQ": { + "1Bxo3C6qr5GhWfFUYAgb8Y": { "type": "svg", "index": 0, "name": "heroicons:code-bracket", - "parent": "1Bxgjgs7MSq1dB1msbhSKh" + "parent": "1Bxo3C6qhq3kVxjJcdgT9C" }, - "1Bxgjgs7RM3fZ5FYfm5aSm": { + "1Bxo3C6qjKhjS2ZGYFLjBq": { "type": "text", "index": 1, "name": "title", - "parent": "1Bxgjgs7FB3RchpL7L2Dci" + "parent": "1Bxo3C6qpD8RvxoCkSuKLB" }, - "1Bxgjgs7P7VbwRi3KxeN4i": { + "1Bxo3C6qwyg8hoBrLMEYF5": { "type": "text", "index": 2, "name": "description", - "parent": "1Bxgjgs7FB3RchpL7L2Dci" + "parent": "1Bxo3C6qpD8RvxoCkSuKLB" }, - "1Bxgjgs7P3Z3JD33a6jfqf": { + "1Bxo3C6rAqUfJWE7sRRodr": { "type": "frame", "index": 3, "name": "Frame", "parent": "RBRbRka6AM86_dEkuICiP0cnnwfa0NE5p7Js1TESPPM" }, - "1Bxgjgs7auRAwgdw9fvnRR": { + "1Bxo3C6r7LtVPvNQVogbJh": { "type": "frame", "index": 0, "name": "Stack", - "parent": "1Bxgjgs7P3Z3JD33a6jfqf" + "parent": "1Bxo3C6rAqUfJWE7sRRodr" }, - "1Bxgjgs7WeBSxLcYBRyrcD": { + "1Bxo3C6r3Pu37jwdLdVqxA": { "type": "frame", "index": 0, "name": "Item 0", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7PvfnmhnhMVzpe5": { + "1Bxo3C6r2ifqN6yAj8YPcm": { "type": "frame", "index": 1, "name": "Item 1", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7ce82EC47MCbVzQ": { + "1Bxo3C6r5rFgiudrDidbYB": { "type": "frame", "index": 2, "name": "Hidden Item", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7WoxnJt3SXEAZxk": { + "1Bxo3C6qxVM8FswHN9dDfA": { "type": "frame", "index": 3, "name": "Item 2", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, - "1Bxgjgs7NwKMv6y6xbTFsC": { + "1Bxo3C6r6zpWfSURmXzF3Y": { "type": "text", "index": 4, "name": "Text", - "parent": "1Bxgjgs7auRAwgdw9fvnRR" + "parent": "1Bxo3C6r7LtVPvNQVogbJh" }, "Xg2GP1ntg1rdapBK2O4Ybjkm_3ZDNotvWabzYDQYd_0": { "type": "page", @@ -231,509 +231,507 @@ "name": "src/landing", "parent": "project" }, - "1Bxgjgs856ozyxM7Gvhbjc": { + "1Bxo3C6rNCSfPWdGhSWAQb": { "type": "component", "index": 0, "name": "Header", "parent": "Xg2GP1ntg1rdapBK2O4Ybjkm_3ZDNotvWabzYDQYd_0" }, - "1Bxgjgs81wP62FPw4bcfhT": { + "1Bxo3C6reZiqnm92TWtWHQ": { "type": "frame", "index": 0, - "parent": "1Bxgjgs856ozyxM7Gvhbjc" + "parent": "1Bxo3C6rNCSfPWdGhSWAQb" }, - "1Bxgjgs7zZKrx3nQhukRka": { + "1Bxo3C6rdTYBYs6tdQSfot": { "type": "frame", "index": 0, "name": "Frame 102", - "parent": "1Bxgjgs81wP62FPw4bcfhT" + "parent": "1Bxo3C6reZiqnm92TWtWHQ" }, - "1Bxgjgs8Kv6iqJ2iAzLWx5": { + "1Bxo3C6rcszdsgc2WPkD5y": { "type": "svg", "index": 0, "name": "Frame 178", - "parent": "1Bxgjgs7zZKrx3nQhukRka" + "parent": "1Bxo3C6rdTYBYs6tdQSfot" }, - "1Bxgjgs8CWGDfN8TZrHY5d": { + "1Bxo3C6rdWv8jQj4DMGpZe": { "type": "text", "index": 1, "name": "UIMix", - "parent": "1Bxgjgs7zZKrx3nQhukRka" + "parent": "1Bxo3C6rdTYBYs6tdQSfot" }, - "1Bxgjgs8AEfmXrQ1XoTJWM": { + "1Bxo3C6rUeL53z3jYejg8x": { "type": "frame", "index": 1, "name": "Frame 179", - "parent": "1Bxgjgs81wP62FPw4bcfhT" + "parent": "1Bxo3C6reZiqnm92TWtWHQ" }, - "1Bxgjgs8KpNgbzkH8JHFTd": { + "1Bxo3C6rSccinGtgd498h3": { "type": "frame", "index": 0, "name": "Frame 3", - "parent": "1Bxgjgs8AEfmXrQ1XoTJWM" + "parent": "1Bxo3C6rUeL53z3jYejg8x" }, - "1Bxgjgs888tLBgvdVqzY1Y": { + "1Bxo3C6rU4zJwXuNywFP8F": { "type": "text", "index": 0, "name": "Sign In", - "parent": "1Bxgjgs8KpNgbzkH8JHFTd" + "parent": "1Bxo3C6rSccinGtgd498h3" }, - "1Bxgjgs8Gog5QECGPJvRFT": { + "1Bxo3C6rV4VMcnmG9MidGb": { "type": "frame", "index": 1, "name": "Frame 4", - "parent": "1Bxgjgs8AEfmXrQ1XoTJWM" + "parent": "1Bxo3C6rUeL53z3jYejg8x" }, - "1Bxgjgs8TBhwxqqYS556c5": { + "1Bxo3C6raUpdST9wEniYFj": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjgs8Gog5QECGPJvRFT" + "parent": "1Bxo3C6rV4VMcnmG9MidGb" }, - "1Bxgjgs8bxKJiYyH1XzUks": { + "1Bxo3C6re1XPc4qMDntEUQ": { "type": "frame", "index": 2, "name": "Frame 180", - "parent": "1Bxgjgs81wP62FPw4bcfhT" + "parent": "1Bxo3C6reZiqnm92TWtWHQ" }, - "1Bxgjgs8ZXsNBe3S8TDgek": { + "1Bxo3C6rUnqzQVWX2PQmqv": { "type": "text", "index": 0, "name": "Features", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8UGwKhZKDwJHHfy": { + "1Bxo3C6raumFpYXC4T8rhF": { "type": "text", "index": 1, "name": "Pricing", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8ZkCHkqiKS1RiCZ": { + "1Bxo3C6rXetSvkPfWkUecp": { "type": "text", "index": 2, "name": "Docs", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8W7xNEcLCS3yGFC": { + "1Bxo3C6rejWf99Sx8WAoVd": { "type": "text", "index": 3, "name": "GitHub", - "parent": "1Bxgjgs8bxKJiYyH1XzUks" + "parent": "1Bxo3C6re1XPc4qMDntEUQ" }, - "1Bxgjgs8iwtAHhAwjzfbMX": { + "1Bxo3C6rtmEX2p1vgta8L7": { "type": "component", "index": 1, "name": "Landing", "parent": "Xg2GP1ntg1rdapBK2O4Ybjkm_3ZDNotvWabzYDQYd_0" }, - "1Bxgjgs8kC4aw1azZHyGsQ": { + "1Bxo3C6rr1sQSQkfwYEzSn": { "type": "frame", "index": 0, - "parent": "1Bxgjgs8iwtAHhAwjzfbMX" + "parent": "1Bxo3C6rtmEX2p1vgta8L7" }, - "1Bxgjgs8vLAj7Q93bY3bha": { + "1Bxo3C6rqf9KjdEC662cXH": { "type": "instance", "index": 0, "name": "Frame", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs8v4jRevPDsNjkSM": { + "1Bxo3C6rkHuRSrnWPBZaas": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs8ywyLZd2hvPrkie": { + "1Bxo3C6rnaouPPk9JqUWXb": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs95z12ycBZEmZJAG": { + "1Bxo3C6sfXCKYRBgK6zdiQ": { "type": "image", "index": 0, "name": "image 2", - "parent": "1Bxgjgs8ywyLZd2hvPrkie" + "parent": "1Bxo3C6rnaouPPk9JqUWXb" }, - "1Bxgjgs94oFenCTBdmDq9Q": { + "1Bxo3C6sdEdhQQp9GiBtMe": { "type": "text", "index": 1, "name": "Revolutionize Your Web Design and Development Workflow", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs97JY7R533Vyyvhr": { + "1Bxo3C6seCnEWWC2CmSVbL": { "type": "text", "index": 2, "name": "UIMix is a open-source design tool that combines intuitive editing, React integration, AI assistance, and advanced design tokens.", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs9FsePfRDBzs1JmK": { + "1Bxo3C6sdMV1f96Gz6MwiY": { "type": "frame", "index": 3, "name": "Frame 4", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs9EUdvKv1qxyidrz": { + "1Bxo3C6sVow949K37FxSJh": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1Bxgjgs9FsePfRDBzs1JmK" + "parent": "1Bxo3C6sdMV1f96Gz6MwiY" }, - "1Bxgjgs9D7oGydLi4jG4XE": { + "1Bxo3C6sVniX2a7ramwBhC": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1Bxgjgs9EUdvKv1qxyidrz" + "parent": "1Bxo3C6sVow949K37FxSJh" }, - "1Bxgjgs98WvCvn2UYCsg7m": { + "1Bxo3C6sbzQA2fdGiT2eeV": { "type": "image", "index": 4, "name": "image 1", - "parent": "1Bxgjgs8v4jRevPDsNjkSM" + "parent": "1Bxo3C6rkHuRSrnWPBZaas" }, - "1Bxgjgs9AWzy5974JBEtMt": { + "1Bxo3C6sVeFTeraBaaPjCB": { "type": "frame", "index": 2, "name": "Frame 19", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs99FRGedmfydqpA1": { + "1Bxo3C6sZwYpDzdkE45eBS": { "type": "frame", "index": 0, "name": "Frame 181", - "parent": "1Bxgjgs9AWzy5974JBEtMt" + "parent": "1Bxo3C6sVeFTeraBaaPjCB" }, - "1Bxgjgs9HHcq3b23dQPBJc": { + "1Bxo3C6saRcsTxiyF5sJnD": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9E3XwxfF94K6gkU": { + "1Bxo3C6scND6zt3gZwTfwZ": { "type": "frame", "index": 0, "name": "Frame 5", - "parent": "1Bxgjgs9HHcq3b23dQPBJc" + "parent": "1Bxo3C6saRcsTxiyF5sJnD" }, - "1Bxgjgs9GPncA9ou5K4mjt": { + "1Bxo3C6sjSyetFFzqcjBWZ": { "type": "svg", "index": 0, "name": "heroicons:pencil-square", - "parent": "1Bxgjgs9E3XwxfF94K6gkU" + "parent": "1Bxo3C6scND6zt3gZwTfwZ" }, - "1Bxgjgs9E58YBnDTdMazJT": { + "1Bxo3C6sgZ29ssGqbMpPDF": { "type": "text", "index": 1, "name": "Figma-like Intuitive Editing", - "parent": "1Bxgjgs9HHcq3b23dQPBJc" + "parent": "1Bxo3C6saRcsTxiyF5sJnD" }, - "1Bxgjgs9CdcibjrGwKyvbv": { + "1Bxo3C6shBGFajkREGCg8w": { "type": "text", "index": 2, "name": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", - "parent": "1Bxgjgs9HHcq3b23dQPBJc" + "parent": "1Bxo3C6saRcsTxiyF5sJnD" }, - "1Bxgjgs9XEh7ciZR5VcQh3": { + "1Bxo3C6sj3gPb6WfCt4zcu": { "type": "frame", "index": 1, "name": "Frame 14", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9X67RigYygC5Abb": { + "1Bxo3C6szdg9cByMH2ZnQp": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9XEh7ciZR5VcQh3" + "parent": "1Bxo3C6sj3gPb6WfCt4zcu" }, - "1Bxgjgs9PkPHW5GeM4Sm9j": { + "1Bxo3C6t1NmiVmYLWmAinX": { "type": "svg", "index": 0, "name": "heroicons:code-bracket", - "parent": "1Bxgjgs9X67RigYygC5Abb" + "parent": "1Bxo3C6szdg9cByMH2ZnQp" }, - "1Bxgjgs9b5R4DwuZDed9Z8": { + "1Bxo3C6t7YDwWZKJ9r23kg": { "type": "text", "index": 1, "name": "React Components Import/Export", - "parent": "1Bxgjgs9XEh7ciZR5VcQh3" + "parent": "1Bxo3C6sj3gPb6WfCt4zcu" }, - "1Bxgjgs9ZDY1GLQPtyaFEd": { + "1Bxo3C6syt8e7s3qceRjCB": { "type": "text", "index": 2, "name": "Seamlessly work with React components, boosting your design-to-development workflow.", - "parent": "1Bxgjgs9XEh7ciZR5VcQh3" + "parent": "1Bxo3C6sj3gPb6WfCt4zcu" }, - "1Bxgjgs9awHtyP1buYVYos": { + "1Bxo3C6sxGvxAkat5P32Hv": { "type": "frame", "index": 2, "name": "Frame 15", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9QkAPcjMDD8pbHk": { + "1Bxo3C6sy9pDb1WK3jSZQE": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9awHtyP1buYVYos" + "parent": "1Bxo3C6sxGvxAkat5P32Hv" }, - "1Bxgjgs9VBZpEGBwdrnNAM": { + "1Bxo3C6swFeiZ9tZb7ZcYq": { "type": "svg", "index": 0, "name": "heroicons:cloud", - "parent": "1Bxgjgs9QkAPcjMDD8pbHk" + "parent": "1Bxo3C6sy9pDb1WK3jSZQE" }, - "1Bxgjgs9WQB3ub5Y6czH5g": { + "1Bxo3C6t2DfxStM7XDnRuo": { "type": "text", "index": 1, "name": "Collaboration for Everyone", - "parent": "1Bxgjgs9awHtyP1buYVYos" + "parent": "1Bxo3C6sxGvxAkat5P32Hv" }, - "1Bxgjgs9Wh3fM7jU1Watbb": { + "1Bxo3C6syzzHBADxMU12eh": { "type": "text", "index": 2, "name": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.", - "parent": "1Bxgjgs9awHtyP1buYVYos" + "parent": "1Bxo3C6sxGvxAkat5P32Hv" }, - "1Bxgjgs9aqhTtrW8GpYXyW": { + "1Bxo3C6tLnDNZuAi2BPt79": { "type": "frame", "index": 3, "name": "Frame 16", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9TxnPEzkeGrVj3N": { + "1Bxo3C6tF6hsZj42Ca3xqi": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9aqhTtrW8GpYXyW" + "parent": "1Bxo3C6tLnDNZuAi2BPt79" }, - "1Bxgjgs9QuoUd674ADNEgq": { + "1Bxo3C6tGPLo2LecVx9UcJ": { "type": "svg", "index": 0, "name": "heroicons:computer-desktop", - "parent": "1Bxgjgs9TxnPEzkeGrVj3N" + "parent": "1Bxo3C6tF6hsZj42Ca3xqi" }, - "1Bxgjgs9RzQh2ZKhGfUyjK": { + "1Bxo3C6tFbAwbjSgz6VuGr": { "type": "text", "index": 1, "name": "Offline Editing Experience", - "parent": "1Bxgjgs9aqhTtrW8GpYXyW" + "parent": "1Bxo3C6tLnDNZuAi2BPt79" }, - "1Bxgjgs9c9Nr4tpKHFBgmq": { + "1Bxo3C6tFWw21DduVXnvHr": { "type": "text", "index": 2, "name": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.", - "parent": "1Bxgjgs9aqhTtrW8GpYXyW" + "parent": "1Bxo3C6tLnDNZuAi2BPt79" }, - "1Bxgjgs9SkoQ2v49ZWqcRS": { + "1Bxo3C6tL6xbNFD5BAG2xj": { "type": "frame", "index": 4, "name": "Frame 17", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9q2YgXemj4iPnFm": { + "1Bxo3C6tMtHqr7Yvtseo5S": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9SkoQ2v49ZWqcRS" + "parent": "1Bxo3C6tL6xbNFD5BAG2xj" }, - "1Bxgjgs9gXAhmCU2PCwYtc": { + "1Bxo3C6tC6oB2knVgwoEVT": { "type": "svg", "index": 0, "name": "carbon:machine-learning", - "parent": "1Bxgjgs9q2YgXemj4iPnFm" + "parent": "1Bxo3C6tMtHqr7Yvtseo5S" }, - "1Bxgjgs9fqYS24PdQgjvEd": { + "1Bxo3C6tEUetgJNYMaXZV1": { "type": "text", "index": 1, "name": "AI Assistance", - "parent": "1Bxgjgs9SkoQ2v49ZWqcRS" + "parent": "1Bxo3C6tL6xbNFD5BAG2xj" }, - "1Bxgjgs9efkiTtyP16cdbJ": { + "1Bxo3C6tFceQnq6jKHwUZF": { "type": "text", "index": 2, "name": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", - "parent": "1Bxgjgs9SkoQ2v49ZWqcRS" + "parent": "1Bxo3C6tL6xbNFD5BAG2xj" }, - "1Bxgjgs9fnauTXkyKgJtBU": { + "1Bxo3C6tNCjEnZmf6nEZJ6": { "type": "frame", "index": 5, "name": "Frame 18", - "parent": "1Bxgjgs99FRGedmfydqpA1" + "parent": "1Bxo3C6sZwYpDzdkE45eBS" }, - "1Bxgjgs9gTCfvEwRA6PBAU": { + "1Bxo3C6tHV7ezmprPH9Lf5": { "type": "frame", "index": 0, "name": "Frame 13", - "parent": "1Bxgjgs9fnauTXkyKgJtBU" + "parent": "1Bxo3C6tNCjEnZmf6nEZJ6" }, - "1Bxgjgs9oDaNroUbVBkYYF": { + "1Bxo3C6tYsuGh8ws2omu8a": { "type": "svg", "index": 0, "name": "carbon:logo-figma", - "parent": "1Bxgjgs9gTCfvEwRA6PBAU" + "parent": "1Bxo3C6tHV7ezmprPH9Lf5" }, - "1Bxgjgs9cuRr7x9X6oqu5z": { + "1Bxo3C6tZNtV3D4c4s9kzR": { "type": "text", "index": 1, "name": "Figma Integration", - "parent": "1Bxgjgs9fnauTXkyKgJtBU" + "parent": "1Bxo3C6tNCjEnZmf6nEZJ6" }, - "1Bxgjgs9dXBQDGvaCtqi4i": { + "1Bxo3C6tZg5DpGcRuLbaRq": { "type": "text", "index": 2, "name": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", - "parent": "1Bxgjgs9fnauTXkyKgJtBU" + "parent": "1Bxo3C6tNCjEnZmf6nEZJ6" }, - "1Bxgjgs9k9mX7Cwvqzm54j": { + "1Bxo3C6tYN1XAWaPApxdDP": { "type": "frame", "index": 3, "name": "Frame", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs9hfjcSYCCF61mun": { + "1Bxo3C6tXEBfsTnN7vmfeD": { "type": "text", "index": 0, "name": "Open Source", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1Bxgjgs9rLVbSxdPJodHqn": { + "1Bxo3C6teueDo5h7WNjj2j": { "type": "text", "index": 1, "name": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options. Self-host both components for greater control over your design environment and data security.", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1Bxgjgs9tN9yLtoNEvYn7z": { + "1Bxo3C6tRsjHPz2bdBcTV1": { "type": "frame", "index": 2, "name": "Frame 3", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1Bxgjgs9szsG44zZhsehfS": { + "1Bxo3C6teswLE9z98W9Keg": { "type": "text", "index": 0, "name": "Explore GitHub repo", - "parent": "1Bxgjgs9tN9yLtoNEvYn7z" + "parent": "1Bxo3C6tRsjHPz2bdBcTV1" }, - "1Bxgjgs9tBYpT1rAt4AVoz": { + "1Bxo3C6tnZox5DyFFBmJ8T": { "type": "text", "index": 3, "name": "How It Works", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1BxgjgsA17v5FG3eRX8HVz": { + "1Bxo3C6tqVBLJY9ao12DGY": { "type": "frame", "index": 4, "name": "Frame", - "parent": "1Bxgjgs9k9mX7Cwvqzm54j" + "parent": "1Bxo3C6tYN1XAWaPApxdDP" }, - "1BxgjgsA1vQipRm9xnzfDg": { + "1Bxo3C6tkLjwwJhYs5ALYP": { "type": "frame", "index": 0, "name": "Frame", - "parent": "1BxgjgsA17v5FG3eRX8HVz" + "parent": "1Bxo3C6tqVBLJY9ao12DGY" }, - "1Bxgjgs9yoDFJeJXnXsvyi": { + "1Bxo3C6vKTJaALBY89EAbA": { "type": "text", "index": 0, "name": "A. Start Your Project", - "parent": "1BxgjgsA1vQipRm9xnzfDg" + "parent": "1Bxo3C6tkLjwwJhYs5ALYP" }, - "1Bxgjgs9wevQuQnGJPzEta": { + "1Bxo3C6vAc3bauH9BFdVh6": { "type": "text", "index": 1, "name": "Sign up for a free account or log in. Create a new project or import an existing Figma design. Organize your components and design tokens in the user-friendly interface.", - "parent": "1BxgjgsA1vQipRm9xnzfDg" + "parent": "1Bxo3C6tkLjwwJhYs5ALYP" }, - "1BxgjgsA6WTgyzkyPKursw": { + "1Bxo3C6vLgZXkwDWsvS4qB": { "type": "frame", "index": 1, "name": "Frame", - "parent": "1BxgjgsA17v5FG3eRX8HVz" + "parent": "1Bxo3C6tqVBLJY9ao12DGY" }, - "1BxgjgsA6ogWtv33CuxHxs": { + "1Bxo3C6vb445HkcT7i13JB": { "type": "text", "index": 0, "name": "B. Design & Develop", - "parent": "1BxgjgsA6WTgyzkyPKursw" + "parent": "1Bxo3C6vLgZXkwDWsvS4qB" }, - "1Bxgjgs9yRfHURxfqVst7k": { + "1Bxo3C6vbpPQDpfSanPWfj": { "type": "text", "index": 1, "name": "Utilize Figma-like editing tools to create and modify designs. Seamlessly import React components into your UIMix project. Leverage AI assistance to efficiently generate and refine your content.", - "parent": "1BxgjgsA6WTgyzkyPKursw" + "parent": "1Bxo3C6vLgZXkwDWsvS4qB" }, - "1BxgjgsA1Uu23M1rqgYY6J": { + "1Bxo3C6vWncDbPuYNEi5tN": { "type": "frame", "index": 2, "name": "Frame", - "parent": "1BxgjgsA17v5FG3eRX8HVz" + "parent": "1Bxo3C6tqVBLJY9ao12DGY" }, - "1BxgjgsA4eYi2ZbYvWsxiW": { + "1Bxo3C6vYmSFRMBtJR8wMC": { "type": "text", "index": 0, "name": "C. Collaborate & Publish", - "parent": "1BxgjgsA1Uu23M1rqgYY6J" + "parent": "1Bxo3C6vWncDbPuYNEi5tN" }, - "1Bxgjgs9rcRMNzmecHh2Zi": { + "1Bxo3C6vqiXStKvHYxcJKZ": { "type": "text", "index": 1, "name": "Collaborate using the online editor or work offline for an optimized development experience. Integrate with GitHub for streamlined version control. Easily import UIMix components into React apps or export final designs back to Figma.", - "parent": "1BxgjgsA1Uu23M1rqgYY6J" + "parent": "1Bxo3C6vWncDbPuYNEi5tN" }, - "1Bxgjgs9uLsj7SwVxQdHv3": { + "1Bxo3C6vszh4iiDksf3E12": { "type": "frame", "index": 4, "name": "Frame 21", - "parent": "1Bxgjgs8kC4aw1azZHyGsQ" + "parent": "1Bxo3C6rr1sQSQkfwYEzSn" }, - "1Bxgjgs9zrsdpDGriwG9Yb": { + "1Bxo3C6vkEFt4fdED7W9Hh": { "type": "image", "index": 0, "name": "image 4", - "parent": "1Bxgjgs9uLsj7SwVxQdHv3" + "parent": "1Bxo3C6vszh4iiDksf3E12" }, - "1BxgjgsA67fGG3oJLQgrNF": { + "1Bxo3C6vg9WRJz25B7wRi1": { "type": "text", "index": 1, "name": "Ready to revolutionize your web design workflow?", - "parent": "1Bxgjgs9uLsj7SwVxQdHv3" + "parent": "1Bxo3C6vszh4iiDksf3E12" }, - "1BxgjgsA8QB6gjuxQQrcn5": { + "1Bxo3C6vnSqcJRKjTfCnms": { "type": "frame", "index": 2, "name": "Frame 20", - "parent": "1Bxgjgs9uLsj7SwVxQdHv3" + "parent": "1Bxo3C6vszh4iiDksf3E12" }, - "1BxgjgsAEw22VV7hyUmxto": { + "1Bxo3C6vqodXXQKr9SF2ht": { "type": "frame", "index": 0, "name": "Frame 2", - "parent": "1BxgjgsA8QB6gjuxQQrcn5" + "parent": "1Bxo3C6vnSqcJRKjTfCnms" }, - "1BxgjgsAFAMFrDTX2YLmdP": { + "1Bxo3C6vmLKDZMdMTN1Fki": { "type": "text", "index": 0, "name": "Get Early Access", - "parent": "1BxgjgsAEw22VV7hyUmxto" + "parent": "1Bxo3C6vqodXXQKr9SF2ht" }, - "1BxgjgsADhr4Xb4CmzZrhs": { + "1Bxo3C6wU6pGqTmqEgaG26": { "type": "variant", "index": 1, "condition": { "type": "maxWidth", "value": 767 }, - "parent": "1Bxgjgs8iwtAHhAwjzfbMX" + "parent": "1Bxo3C6rtmEX2p1vgta8L7" } }, "styles": { - "1Bxgjgs78B7Q9WygLinw8N": { + "1Bxo3C6pbVJspdKo4tuhLV": { "width": "hug", "height": "hug", - "fills": [{ "solid": "#111827" }], + "color": "#111827", "textContent": "Button" }, - "1Bxgjgs6uDAKz2qq16i1NL:1Bxgjgs78B7Q9WygLinw8N": { - "fills": [{ "solid": "#FFFFFF" }] - }, - "1Bxgjgs75jx7aNfgBLMn8c:1Bxgjgs78B7Q9WygLinw8N": { "fontSize": 14 }, - "1Bxgjgs74468hXW4Lsmyro": { + "1Bxo3C6pqc4xbTk8Z2drp1:1Bxo3C6pbVJspdKo4tuhLV": { "color": "#FFFFFF" }, + "1Bxo3C6pvojtTetfkk3huT:1Bxo3C6pbVJspdKo4tuhLV": { "fontSize": 14 }, + "1Bxo3C6pa9C96vm68m18nx": { "position": { "left": 50, "top": 400 }, "width": "hug", "height": "hug", @@ -744,54 +742,54 @@ "paddingBottom": 4, "paddingLeft": 8 }, - "1Bxgjgs6uDAKz2qq16i1NL": { + "1Bxo3C6pqc4xbTk8Z2drp1": { "position": { "left": 200, "top": 400 }, "fills": [{ "solid": { "token": "blue/500" } }] }, - "1Bxgjgs75jx7aNfgBLMn8c": { + "1Bxo3C6pvojtTetfkk3huT": { "position": { "left": 350, "top": 400 }, "paddingTop": 2, "paddingRight": 4, "paddingBottom": 2, "paddingLeft": 4 }, - "1Bxgjgs6t3QbM3uq6iA3ix": { + "1Bxo3C6q5CsPDw71dZmJW5": { "width": { "min": 25, "max": 100 }, "height": { "min": 20, "max": 60 }, - "fills": [{ "solid": { "token": "1Bxgjgs7W6WsySYu61zEod" } }] + "fills": [{ "solid": { "token": "1Bxo3C6rA9BcPuUKGVUgXr" } }] }, - "1Bxgjgs72smms8A9Pjz3Zd": { + "1Bxo3C6q4W6uYwxiTXCL8U": { "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs71H6rJEo5phXEEv": { + "1Bxo3C6qHa6aMpCgDtYBdx": { "hidden": true, "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs7FTZaV7jVq7sTa9": { + "1Bxo3C6qLz7gdZgaGrNuRe": { "width": 80, "height": 40, "fills": [{ "solid": { "token": "blue/500" } }] }, - "1Bxgjgs7KPs4W48eRiv6Nt": { + "1Bxo3C6qLFwDcz4KpdL3U9": { "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "marginTop": 10, "marginRight": 20, "marginBottom": 30, "marginLeft": 40, + "color": "#000000", "textContent": "Hello, world!", "fontSize": 20 }, - "1Bxgjgs7FnK31vXBsavCrv": { + "1Bxo3C6qN64gYU4TjxC2if": { "position": null, - "mainComponent": "1Bxgjgs6sCdp9Np51fcYL6" + "mainComponent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs6xzDgHWiWd7tyjF": { + "1Bxo3C6pwdpFFY9hnHbfti": { "position": { "left": 50, "top": 184 }, "width": "hug", "height": "hug", @@ -804,7 +802,7 @@ "paddingBottom": 30, "paddingLeft": 40 }, - "1Bxgjgs7GgYtwxcyAZD4he": { + "1Bxo3C6qY7WnohJCkr3eMv": { "width": { "min": 0 }, "height": "hug", "foreignComponent": { @@ -814,7 +812,7 @@ "props": {} } }, - "1Bxgjgs7FYYSZbbXtbLqBc": { + "1Bxo3C6qTXiqYV49t8Qadf": { "position": { "left": 33, "top": 28 }, "width": "hug", "height": "hug", @@ -830,45 +828,45 @@ } } }, - "1Bxgjgs7HhEZjievv2PuAk": { + "1Bxo3C6qXVvsUXyAsaMmhW": { "position": { "left": 160, "top": 28 }, "fills": [{ "solid": "#BABABA" }], - "mainComponent": "1Bxgjgs6sCdp9Np51fcYL6" + "mainComponent": "1Bxo3C6pTEEXvWVaps2hMw" }, - "1Bxgjgs7HhEZjievv2PuAk:1Bxgjgs78B7Q9WygLinw8N": { + "1Bxo3C6qXVvsUXyAsaMmhW:1Bxo3C6pbVJspdKo4tuhLV": { "textContent": "Override Name" }, - "1Bxgjgs7H4kVHE231YZi4r": { + "1Bxo3C6qu8s5yoCCir1e6V": { "position": { "left": 33, "top": 97 }, "width": 100, "height": 100, "fills": [{ "solid": "#FFFFFF" }], "imageHash": "YmY-tuteU03QY-k_2ARy1uacNmXDNmOX-FFAlj2qCIo" }, - "1Bxgjgs7BRL3UmPLBcesrM": { + "1Bxo3C6qtdohAawrPuA17r": { "position": { "left": 165, "top": 86 }, - "mainComponent": "1Bxgjgs75hMvadhoSBw4rj" - }, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs6t3QbM3uq6iA3ix": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs72smms8A9Pjz3Zd": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs71H6rJEo5phXEEv": { "hidden": false }, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FTZaV7jVq7sTa9": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7KPs4W48eRiv6Nt": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv": {}, - "1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv:1Bxgjgs78B7Q9WygLinw8N": { + "mainComponent": "1Bxo3C6pxb5nNRiefxWSxd" + }, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q5CsPDw71dZmJW5": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q4W6uYwxiTXCL8U": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qHa6aMpCgDtYBdx": { "hidden": false }, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLz7gdZgaGrNuRe": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLFwDcz4KpdL3U9": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if": {}, + "1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if:1Bxo3C6pbVJspdKo4tuhLV": { "textContent": "Nested Override" }, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs6t3QbM3uq6iA3ix": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs72smms8A9Pjz3Zd": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs71H6rJEo5phXEEv": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FTZaV7jVq7sTa9": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7KPs4W48eRiv6Nt": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv": {}, - "1Bxgjgs7DVpp12i6fyBE1X:1Bxgjgs7BRL3UmPLBcesrM:1Bxgjgs7FnK31vXBsavCrv:1Bxgjgs78B7Q9WygLinw8N": { - "fills": [{ "solid": "#FF0000" }] - }, - "1Bxgjgs7LtBXJa9Pdvk1YE": { + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q5CsPDw71dZmJW5": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6q4W6uYwxiTXCL8U": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qHa6aMpCgDtYBdx": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLz7gdZgaGrNuRe": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qLFwDcz4KpdL3U9": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if": {}, + "1Bxo3C6qkXC6fHzarkygcj:1Bxo3C6qtdohAawrPuA17r:1Bxo3C6qN64gYU4TjxC2if:1Bxo3C6pbVJspdKo4tuhLV": { + "color": "#FF0000" + }, + "1Bxo3C6qoMVRdjkQmWuySH": { "position": { "left": 315, "top": 29 }, "foreignComponent": { "type": "react", @@ -881,12 +879,12 @@ } } }, - "1Bxgjgs78a1gqzQDDQuJYL": { + "1Bxo3C6qdMNKdMgmukbnc9": { "width": { "min": 0 }, "height": { "min": 0 }, "fills": [{ "solid": "#FFFFFF" }] }, - "1Bxgjgs7MQ7TMPGiatLM8k": { + "1Bxo3C6qfV8LfTN9p731cN": { "position": { "left": 50, "top": 585 }, "width": 900, "height": 456, @@ -895,16 +893,16 @@ "flexDirection": "y", "flexAlign": "center" }, - "1Bxgjgs7DVpp12i6fyBE1X": { + "1Bxo3C6qkXC6fHzarkygcj": { "position": { "left": 986, "top": 585 }, "width": 720 }, - "1Bxgjgs7T3CudFWxUkwgXQ": { + "1Bxo3C6qr5GhWfFUYAgb8Y": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs7MSq1dB1msbhSKh": { + "1Bxo3C6qhq3kVxjJcdgT9C": { "hidden": false, "width": "hug", "height": "hug", @@ -926,12 +924,12 @@ "paddingBottom": 3, "paddingLeft": 3 }, - "1Bxgjgs7RM3fZ5FYfm5aSm": { + "1Bxo3C6qjKhjS2ZGYFLjBq": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "React Components Import/Export", "fontFamily": "Satoshi", "fontWeight": 700, @@ -940,12 +938,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs7P7VbwRi3KxeN4i": { + "1Bxo3C6qwyg8hoBrLMEYF5": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Seamlessly work with React components, boosting your design-to-development workflow.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -954,7 +952,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs7FB3RchpL7L2Dci": { + "1Bxo3C6qpD8RvxoCkSuKLB": { "hidden": false, "position": { "left": 50, "top": 1144 }, "width": 400, @@ -977,39 +975,39 @@ "paddingBottom": 19, "paddingLeft": 19 }, - "1Bxgjgs7WeBSxLcYBRyrcD": { + "1Bxo3C6r3Pu37jwdLdVqxA": { "width": { "min": 25, "max": 100 }, "height": { "min": 20, "max": 60 }, - "fills": [{ "solid": { "token": "1Bxgjgs7W6WsySYu61zEod" } }] + "fills": [{ "solid": { "token": "1Bxo3C6rA9BcPuUKGVUgXr" } }] }, - "1Bxgjgs7PvfnmhnhMVzpe5": { + "1Bxo3C6r2ifqN6yAj8YPcm": { "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs7ce82EC47MCbVzQ": { + "1Bxo3C6r5rFgiudrDidbYB": { "hidden": true, "width": 40, "height": 80, "fills": [{ "solid": "#22C55E" }] }, - "1Bxgjgs7WoxnJt3SXEAZxk": { + "1Bxo3C6qxVM8FswHN9dDfA": { "width": 80, "height": 40, "fills": [{ "solid": { "token": "blue/500" } }] }, - "1Bxgjgs7NwKMv6y6xbTFsC": { + "1Bxo3C6r6zpWfSURmXzF3Y": { "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "marginTop": 10, "marginRight": 20, "marginBottom": 30, "marginLeft": 40, + "color": "#000000", "textContent": "Hello, world!", "fontSize": 20 }, - "1Bxgjgs7auRAwgdw9fvnRR": { + "1Bxo3C6r7LtVPvNQVogbJh": { "position": { "left": 24, "top": 14 }, "width": "hug", "height": "hug", @@ -1022,7 +1020,7 @@ "paddingBottom": 30, "paddingLeft": 40 }, - "1Bxgjgs7P3Z3JD33a6jfqf": { + "1Bxo3C6rAqUfJWE7sRRodr": { "position": { "left": 631, "top": 184 }, "width": 459, "height": 237, @@ -1033,17 +1031,17 @@ "paddingBottom": 12, "paddingLeft": 12 }, - "1Bxgjgs8Kv6iqJ2iAzLWx5": { + "1Bxo3C6rcszdsgc2WPkD5y": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n\n\n" }, - "1Bxgjgs8CWGDfN8TZrHY5d": { + "1Bxo3C6rdWv8jQj4DMGpZe": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "UIMix", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1053,7 +1051,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs7zZKrx3nQhukRka": { + "1Bxo3C6rdTYBYs6tdQSfot": { "hidden": false, "position": { "left": 48, "top": 24 }, "width": "hug", @@ -1076,12 +1074,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs888tLBgvdVqzY1Y": { + "1Bxo3C6rU4zJwXuNywFP8F": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Sign In", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1091,7 +1089,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs8KpNgbzkH8JHFTd": { + "1Bxo3C6rSccinGtgd498h3": { "hidden": false, "width": "hug", "height": "hug", @@ -1121,12 +1119,12 @@ "paddingBottom": 6.5, "paddingLeft": 14.5 }, - "1Bxgjgs8TBhwxqqYS556c5": { + "1Bxo3C6raUpdST9wEniYFj": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1136,7 +1134,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs8Gog5QECGPJvRFT": { + "1Bxo3C6rV4VMcnmG9MidGb": { "hidden": false, "width": "hug", "height": "hug", @@ -1162,7 +1160,7 @@ "paddingBottom": 8, "paddingLeft": 16 }, - "1Bxgjgs8AEfmXrQ1XoTJWM": { + "1Bxo3C6rUeL53z3jYejg8x": { "hidden": false, "position": { "top": 16, "right": 47.99984677551083 }, "width": 247, @@ -1185,12 +1183,12 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs8ZXsNBe3S8TDgek": { + "1Bxo3C6rUnqzQVWX2PQmqv": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Features", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1200,12 +1198,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8UGwKhZKDwJHHfy": { + "1Bxo3C6raumFpYXC4T8rhF": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Pricing", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1215,12 +1213,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8ZkCHkqiKS1RiCZ": { + "1Bxo3C6rXetSvkPfWkUecp": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "Docs", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1230,12 +1228,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8W7xNEcLCS3yGFC": { + "1Bxo3C6rejWf99Sx8WAoVd": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#000000" }], "opacity": 1, + "color": "#000000", "textContent": "GitHub", "fontFamily": "Satoshi", "fontWeight": 500, @@ -1245,7 +1243,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "center" }, - "1Bxgjgs8bxKJiYyH1XzUks": { + "1Bxo3C6re1XPc4qMDntEUQ": { "hidden": false, "width": "hug", "height": "hug", @@ -1267,7 +1265,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs81wP62FPw4bcfhT": { + "1Bxo3C6reZiqnm92TWtWHQ": { "position": { "left": 20, "top": 20 }, "width": 1183, "height": 72, @@ -1278,11 +1276,11 @@ "paddingTop": 24, "paddingBottom": 24 }, - "1Bxgjgs8vLAj7Q93bY3bha": { + "1Bxo3C6rqf9KjdEC662cXH": { "width": { "min": 0 }, - "mainComponent": "1Bxgjgs856ozyxM7Gvhbjc" + "mainComponent": "1Bxo3C6rNCSfPWdGhSWAQb" }, - "1Bxgjgs95z12ycBZEmZJAG": { + "1Bxo3C6sfXCKYRBgK6zdiQ": { "hidden": false, "position": { "left": 343, "top": 45 }, "width": 750, @@ -1296,7 +1294,7 @@ "shadows": [], "imageHash": "XMIUgNq9VxH1FiVdc4M95ZcfqaSP3aF07GtbcGHi9AY" }, - "1Bxgjgs8ywyLZd2hvPrkie": { + "1Bxo3C6rnaouPPk9JqUWXb": { "locked": true, "position": { "left": 0, "top": 0, "right": 0 }, "width": { "min": 0 }, @@ -1305,14 +1303,14 @@ "layout": "flex", "flexJustify": "center" }, - "1Bxgjgs94oFenCTBdmDq9Q": { + "1Bxo3C6sdEdhQQp9GiBtMe": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1F2937" }], "opacity": 1, "marginTop": 96, "marginBottom": 48, + "color": "#1F2937", "textContent": "Revolutionize Your Web Design\nand Development Workflow", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1322,13 +1320,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs97JY7R533Vyyvhr": { + "1Bxo3C6seCnEWWC2CmSVbL": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#6b7280" }], "opacity": 1, "marginBottom": 48, + "color": "#6b7280", "textContent": "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens.", "fontFamily": "Inter", "fontWeight": 400, @@ -1338,12 +1336,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9D7oGydLi4jG4XE": { + "1Bxo3C6sVniX2a7ramwBhC": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, + "color": "#ffffff", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1353,7 +1351,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9EUdvKv1qxyidrz": { + "1Bxo3C6sVow949K37FxSJh": { "hidden": false, "width": "hug", "height": "hug", @@ -1379,7 +1377,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1Bxgjgs9FsePfRDBzs1JmK": { + "1Bxo3C6sdMV1f96Gz6MwiY": { "hidden": false, "width": "hug", "height": "hug", @@ -1402,7 +1400,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs98WvCvn2UYCsg7m": { + "1Bxo3C6sbzQA2fdGiT2eeV": { "hidden": false, "position": { "left": 360, "top": 581 }, "width": { "min": 0, "max": 720 }, @@ -1425,7 +1423,7 @@ "marginBottom": 64, "imageHash": "1yKf5NvwGW-XtLSBDlS3GqZfbEGnLshgQrjyQJImqaM" }, - "1Bxgjgs8v4jRevPDsNjkSM": { + "1Bxo3C6rkHuRSrnWPBZaas": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -1434,12 +1432,12 @@ "paddingRight": 24, "paddingLeft": 24 }, - "1Bxgjgs9GPncA9ou5K4mjt": { + "1Bxo3C6sjSyetFFzqcjBWZ": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9E3XwxfF94K6gkU": { + "1Bxo3C6scND6zt3gZwTfwZ": { "hidden": false, "width": "hug", "height": "hug", @@ -1462,12 +1460,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9E58YBnDTdMazJT": { + "1Bxo3C6sgZ29ssGqbMpPDF": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma-like Intuitive Editing", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1477,12 +1475,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9CdcibjrGwKyvbv": { + "1Bxo3C6shBGFajkREGCg8w": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs.", "fontFamily": "Inter", "fontWeight": 400, @@ -1492,7 +1490,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9HHcq3b23dQPBJc": { + "1Bxo3C6saRcsTxiyF5sJnD": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1515,12 +1513,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9PkPHW5GeM4Sm9j": { + "1Bxo3C6t1NmiVmYLWmAinX": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9X67RigYygC5Abb": { + "1Bxo3C6szdg9cByMH2ZnQp": { "hidden": false, "width": "hug", "height": "hug", @@ -1543,12 +1541,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9b5R4DwuZDed9Z8": { + "1Bxo3C6t7YDwWZKJ9r23kg": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "React Components Import/Export", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1558,12 +1556,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9ZDY1GLQPtyaFEd": { + "1Bxo3C6syt8e7s3qceRjCB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Seamlessly work with React components, boosting your design-to-development workflow.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1573,7 +1571,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9XEh7ciZR5VcQh3": { + "1Bxo3C6sj3gPb6WfCt4zcu": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1596,12 +1594,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9VBZpEGBwdrnNAM": { + "1Bxo3C6swFeiZ9tZb7ZcYq": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9QkAPcjMDD8pbHk": { + "1Bxo3C6sy9pDb1WK3jSZQE": { "hidden": false, "width": "hug", "height": "hug", @@ -1624,12 +1622,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9WQB3ub5Y6czH5g": { + "1Bxo3C6t2DfxStM7XDnRuo": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Collaboration for Everyone", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1639,12 +1637,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9Wh3fM7jU1Watbb": { + "1Bxo3C6syzzHBADxMU12eh": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1654,7 +1652,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9awHtyP1buYVYos": { + "1Bxo3C6sxGvxAkat5P32Hv": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1677,12 +1675,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9QuoUd674ADNEgq": { + "1Bxo3C6tGPLo2LecVx9UcJ": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9TxnPEzkeGrVj3N": { + "1Bxo3C6tF6hsZj42Ca3xqi": { "hidden": false, "width": "hug", "height": "hug", @@ -1705,12 +1703,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9RzQh2ZKhGfUyjK": { + "1Bxo3C6tFbAwbjSgz6VuGr": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Offline Editing Experience", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1720,12 +1718,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9c9Nr4tpKHFBgmq": { + "1Bxo3C6tFWw21DduVXnvHr": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n", "fontFamily": "Inter", "fontWeight": 400, @@ -1735,7 +1733,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9aqhTtrW8GpYXyW": { + "1Bxo3C6tLnDNZuAi2BPt79": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1758,12 +1756,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9gXAhmCU2PCwYtc": { + "1Bxo3C6tC6oB2knVgwoEVT": { "width": "hug", "height": "hug", "svgContent": "\n\n\n\n" }, - "1Bxgjgs9q2YgXemj4iPnFm": { + "1Bxo3C6tMtHqr7Yvtseo5S": { "hidden": false, "width": "hug", "height": "hug", @@ -1786,12 +1784,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9fqYS24PdQgjvEd": { + "1Bxo3C6tEUetgJNYMaXZV1": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "AI Assistance", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1801,12 +1799,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9efkiTtyP16cdbJ": { + "1Bxo3C6tFceQnq6jKHwUZF": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project.", "fontFamily": "Inter", "fontWeight": 400, @@ -1816,7 +1814,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9SkoQ2v49ZWqcRS": { + "1Bxo3C6tL6xbNFD5BAG2xj": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1839,12 +1837,12 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs9oDaNroUbVBkYYF": { + "1Bxo3C6tYsuGh8ws2omu8a": { "width": "hug", "height": "hug", "svgContent": "\n\n\n" }, - "1Bxgjgs9gTCfvEwRA6PBAU": { + "1Bxo3C6tHV7ezmprPH9Lf5": { "hidden": false, "width": "hug", "height": "hug", @@ -1867,12 +1865,12 @@ "paddingBottom": 4, "paddingLeft": 4 }, - "1Bxgjgs9cuRr7x9X6oqu5z": { + "1Bxo3C6tZNtV3D4c4s9kzR": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Figma Integration", "fontFamily": "Satoshi", "fontWeight": 700, @@ -1882,12 +1880,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9dXBQDGvaCtqi4i": { + "1Bxo3C6tZg5DpGcRuLbaRq": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool.", "fontFamily": "Inter", "fontWeight": 400, @@ -1897,7 +1895,7 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9fnauTXkyKgJtBU": { + "1Bxo3C6tNCjEnZmf6nEZJ6": { "hidden": false, "width": { "min": 0 }, "height": { "min": 0 }, @@ -1920,7 +1918,7 @@ "paddingBottom": 20, "paddingLeft": 20 }, - "1Bxgjgs99FRGedmfydqpA1": { + "1Bxo3C6sZwYpDzdkE45eBS": { "hidden": false, "width": { "min": 0, "max": 1200 }, "height": { "min": 0 }, @@ -1943,8 +1941,8 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1BxgjgsADhr4Xb4CmzZrhs:1Bxgjgs99FRGedmfydqpA1": { "gridColumnCount": 1 }, - "1Bxgjgs9AWzy5974JBEtMt": { + "1Bxo3C6wU6pGqTmqEgaG26:1Bxo3C6sZwYpDzdkE45eBS": { "gridColumnCount": 1 }, + "1Bxo3C6sVeFTeraBaaPjCB": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -1967,13 +1965,13 @@ "paddingBottom": 48, "paddingLeft": 24 }, - "1Bxgjgs9hfjcSYCCF61mun": { + "1Bxo3C6tXEBfsTnN7vmfeD": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 24, + "color": "#1f2937", "textContent": "Open Source", "fontFamily": "Satoshi", "fontWeight": 900, @@ -1983,13 +1981,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9rLVbSxdPJodHqn": { + "1Bxo3C6teueDo5h7WNjj2j": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, "marginBottom": 48, + "color": "#4b5563", "textContent": "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security.", "fontFamily": "Inter", "fontWeight": 400, @@ -1999,12 +1997,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9szsG44zZhsehfS": { + "1Bxo3C6teswLE9z98W9Keg": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, + "color": "#1f2937", "textContent": "Explore GitHub repo", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2014,7 +2012,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9tN9yLtoNEvYn7z": { + "1Bxo3C6tRsjHPz2bdBcTV1": { "hidden": false, "width": "hug", "height": "hug", @@ -2045,13 +2043,13 @@ "paddingBottom": 10.5, "paddingLeft": 22.5 }, - "1Bxgjgs9tBYpT1rAt4AVoz": { + "1Bxo3C6tnZox5DyFFBmJ8T": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 72, + "color": "#1f2937", "textContent": "How It Works", "fontFamily": "Satoshi", "fontWeight": 900, @@ -2061,13 +2059,13 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1Bxgjgs9yoDFJeJXnXsvyi": { + "1Bxo3C6vKTJaALBY89EAbA": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 26, + "color": "#1f2937", "textContent": "A. Start Your Project", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2077,12 +2075,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9wevQuQnGJPzEta": { + "1Bxo3C6vAc3bauH9BFdVh6": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface.", "fontFamily": "Inter", "fontWeight": 400, @@ -2092,19 +2090,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1BxgjgsA1vQipRm9xnzfDg": { + "1Bxo3C6tkLjwwJhYs5ALYP": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1BxgjgsA6ogWtv33CuxHxs": { + "1Bxo3C6vb445HkcT7i13JB": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "B. Design & Develop", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2114,12 +2112,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9yRfHURxfqVst7k": { + "1Bxo3C6vbpPQDpfSanPWfj": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content.", "fontFamily": "Inter", "fontWeight": 400, @@ -2129,19 +2127,19 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1BxgjgsA6WTgyzkyPKursw": { + "1Bxo3C6vLgZXkwDWsvS4qB": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1BxgjgsA4eYi2ZbYvWsxiW": { + "1Bxo3C6vYmSFRMBtJR8wMC": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#1f2937" }], "opacity": 1, "marginBottom": 20, + "color": "#1f2937", "textContent": "C. Collaborate & Publish", "fontFamily": "Satoshi", "fontWeight": 700, @@ -2151,12 +2149,12 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1Bxgjgs9rcRMNzmecHh2Zi": { + "1Bxo3C6vqiXStKvHYxcJKZ": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#4b5563" }], "opacity": 1, + "color": "#4b5563", "textContent": "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma.", "fontFamily": "Inter", "fontWeight": 400, @@ -2166,13 +2164,13 @@ "textHorizontalAlign": "start", "textVerticalAlign": "start" }, - "1BxgjgsA1Uu23M1rqgYY6J": { + "1Bxo3C6vWncDbPuYNEi5tN": { "width": { "min": 0 }, "height": "hug", "layout": "flex", "flexDirection": "y" }, - "1BxgjgsA17v5FG3eRX8HVz": { + "1Bxo3C6tqVBLJY9ao12DGY": { "width": { "min": 0, "max": 1280 }, "height": "hug", "layout": "flex", @@ -2180,7 +2178,7 @@ "rowGap": 24, "columnGap": 24 }, - "1Bxgjgs9k9mX7Cwvqzm54j": { + "1Bxo3C6tYN1XAWaPApxdDP": { "width": { "min": 0 }, "height": "hug", "layout": "flex", @@ -2191,7 +2189,7 @@ "paddingBottom": 128, "paddingLeft": 24 }, - "1Bxgjgs9zrsdpDGriwG9Yb": { + "1Bxo3C6vkEFt4fdED7W9Hh": { "hidden": false, "position": { "left": -23, "top": -368 }, "width": 1500, @@ -2205,13 +2203,13 @@ "shadows": [], "imageHash": "DGLFxM8eMqBjHUQYEekprnB3xC-f5uvLxL7x2odVAEU" }, - "1BxgjgsA67fGG3oJLQgrNF": { + "1Bxo3C6vg9WRJz25B7wRi1": { "hidden": false, "width": { "min": 0 }, "height": "hug", - "fills": [{ "solid": "#ffffff" }], "opacity": 1, "marginBottom": 48, + "color": "#ffffff", "textContent": "Ready to revolutionize your web design workflow?", "fontFamily": "Satoshi", "fontWeight": 900, @@ -2221,12 +2219,12 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1BxgjgsAFAMFrDTX2YLmdP": { + "1Bxo3C6vmLKDZMdMTN1Fki": { "hidden": false, "width": "hug", "height": "hug", - "fills": [{ "solid": "#3b82f6" }], "opacity": 1, + "color": "#3b82f6", "textContent": "Get Early Access", "fontFamily": "Satoshi", "fontWeight": 900, @@ -2236,7 +2234,7 @@ "textHorizontalAlign": "center", "textVerticalAlign": "start" }, - "1BxgjgsAEw22VV7hyUmxto": { + "1Bxo3C6vqodXXQKr9SF2ht": { "hidden": false, "width": "hug", "height": "hug", @@ -2262,7 +2260,7 @@ "paddingBottom": 12, "paddingLeft": 24 }, - "1BxgjgsA8QB6gjuxQQrcn5": { + "1Bxo3C6vnSqcJRKjTfCnms": { "hidden": false, "width": "hug", "height": "hug", @@ -2287,7 +2285,7 @@ "paddingBottom": 0, "paddingLeft": 0 }, - "1Bxgjgs9uLsj7SwVxQdHv3": { + "1Bxo3C6vszh4iiDksf3E12": { "hidden": false, "width": { "min": 0 }, "height": "hug", @@ -2304,7 +2302,7 @@ "paddingTop": 96, "paddingBottom": 96 }, - "1Bxgjgs8kC4aw1azZHyGsQ": { + "1Bxo3C6rr1sQSQkfwYEzSn": { "hidden": false, "position": { "left": 20, "top": 200 }, "width": 1440, @@ -2321,7 +2319,7 @@ "flexDirection": "y", "flexAlign": "center" }, - "1BxgjgsADhr4Xb4CmzZrhs": { + "1Bxo3C6wU6pGqTmqEgaG26": { "position": { "left": 1500, "top": 200 }, "width": 720 } @@ -2354,7 +2352,7 @@ } }, "colors": { - "1Bxgjgs7W6WsySYu61zEod": { + "1Bxo3C6rA9BcPuUKGVUgXr": { "index": 0, "name": "Red Orange", "value": "#EF4444", diff --git a/packages/sandbox/src/button.uimix b/packages/sandbox/src/button.uimix index a6830cb8..328c4a8c 100644 --- a/packages/sandbox/src/button.uimix +++ b/packages/sandbox/src/button.uimix @@ -30,10 +30,10 @@ export default ( name="Text" width="hug" height="hug" - fills={[{ solid: "#111827" }]} + color="#111827" textContent="Button" variants={{ - hover: { fills: [{ solid: "#FFFFFF" }] }, + hover: { color: "#FFFFFF" }, "maxWidth:767": { fontSize: 14 }, }} /> diff --git a/packages/sandbox/src/components.uimix b/packages/sandbox/src/components.uimix index ab7583d8..24694fa5 100644 --- a/packages/sandbox/src/components.uimix +++ b/packages/sandbox/src/components.uimix @@ -48,11 +48,11 @@ export default ( name="Text" width="hug" height="hug" - fills={[{ solid: "#000000" }]} marginTop={10} marginRight={20} marginBottom={30} marginLeft={40} + color="#000000" textContent="Hello, world!" fontSize={20} /> @@ -139,9 +139,7 @@ export default ( variants={{ "maxWidth:767": { overrides: { - button: { - overrides: { text: { fills: [{ solid: "#FF0000" }] } }, - }, + button: { overrides: { text: { color: "#FF0000" } } }, }, }, }} @@ -226,8 +224,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="React Components Import/Export" fontFamily="Satoshi" fontWeight={700} @@ -242,8 +240,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" } @@ -311,11 +309,11 @@ export default ( name="Text" width="hug" height="hug" - fills={[{ solid: "#000000" }]} marginTop={10} marginRight={20} marginBottom={30} marginLeft={40} + color="#000000" textContent="Hello, world!" fontSize={20} /> diff --git a/packages/sandbox/src/landing.uimix b/packages/sandbox/src/landing.uimix index 89f4571c..6d73792b 100644 --- a/packages/sandbox/src/landing.uimix +++ b/packages/sandbox/src/landing.uimix @@ -52,8 +52,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="UIMix" fontFamily="Satoshi" fontWeight={900} @@ -127,8 +127,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Sign In" fontFamily="Satoshi" fontWeight={700} @@ -173,8 +173,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -216,8 +216,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Features" fontFamily="Satoshi" fontWeight={500} @@ -233,8 +233,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Pricing" fontFamily="Satoshi" fontWeight={500} @@ -250,8 +250,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Docs" fontFamily="Satoshi" fontWeight={500} @@ -267,8 +267,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="GitHub" fontFamily="Satoshi" fontWeight={500} @@ -353,10 +353,10 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1F2937" }]} opacity={1} marginTop={96} marginBottom={48} + color="#1F2937" textContent={ "Revolutionize Your Web Design\nand Development Workflow" } @@ -374,9 +374,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#6b7280" }]} opacity={1} marginBottom={48} + color="#6b7280" textContent={ "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens." } @@ -447,8 +447,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -603,8 +603,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Figma-like Intuitive Editing" fontFamily="Satoshi" fontWeight={700} @@ -620,8 +620,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs." fontFamily="Inter" fontWeight={400} @@ -698,8 +698,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="React Components Import/Export" fontFamily="Satoshi" fontWeight={700} @@ -715,8 +715,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" } @@ -795,8 +795,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Collaboration for Everyone" fontFamily="Satoshi" fontWeight={700} @@ -812,8 +812,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n" } @@ -892,8 +892,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Offline Editing Experience" fontFamily="Satoshi" fontWeight={700} @@ -909,8 +909,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n" } @@ -989,8 +989,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="AI Assistance" fontFamily="Satoshi" fontWeight={700} @@ -1006,8 +1006,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project." fontFamily="Inter" fontWeight={400} @@ -1084,8 +1084,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Figma Integration" fontFamily="Satoshi" fontWeight={700} @@ -1101,8 +1101,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool." fontFamily="Inter" fontWeight={400} @@ -1134,9 +1134,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={24} + color="#1f2937" textContent="Open Source" fontFamily="Satoshi" fontWeight={900} @@ -1152,9 +1152,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} marginBottom={48} + color="#4b5563" textContent={ "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security." } @@ -1205,8 +1205,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Explore GitHub repo" fontFamily="Satoshi" fontWeight={700} @@ -1223,9 +1223,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={72} + color="#1f2937" textContent="How It Works" fontFamily="Satoshi" fontWeight={900} @@ -1259,9 +1259,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={26} + color="#1f2937" textContent="A. Start Your Project" fontFamily="Satoshi" fontWeight={700} @@ -1277,8 +1277,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface." } @@ -1305,9 +1305,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={20} + color="#1f2937" textContent="B. Design & Develop" fontFamily="Satoshi" fontWeight={700} @@ -1323,8 +1323,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content." } @@ -1351,9 +1351,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={20} + color="#1f2937" textContent="C. Collaborate & Publish" fontFamily="Satoshi" fontWeight={700} @@ -1369,8 +1369,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma." } @@ -1426,9 +1426,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} marginBottom={48} + color="#ffffff" textContent="Ready to revolutionize your web design workflow?" fontFamily="Satoshi" fontWeight={900} @@ -1499,8 +1499,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#3b82f6" }]} opacity={1} + color="#3b82f6" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} diff --git a/packages/sandbox/src/nested/landing.uimix b/packages/sandbox/src/nested/landing.uimix index b4f1a93a..6d73792b 100644 --- a/packages/sandbox/src/nested/landing.uimix +++ b/packages/sandbox/src/nested/landing.uimix @@ -52,8 +52,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="UIMix" fontFamily="Satoshi" fontWeight={900} @@ -127,8 +127,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Sign In" fontFamily="Satoshi" fontWeight={700} @@ -173,8 +173,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -216,8 +216,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Features" fontFamily="Satoshi" fontWeight={500} @@ -233,8 +233,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Pricing" fontFamily="Satoshi" fontWeight={500} @@ -250,8 +250,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="Docs" fontFamily="Satoshi" fontWeight={500} @@ -267,8 +267,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#000000" }]} opacity={1} + color="#000000" textContent="GitHub" fontFamily="Satoshi" fontWeight={500} @@ -353,10 +353,10 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1F2937" }]} opacity={1} marginTop={96} marginBottom={48} + color="#1F2937" textContent={ "Revolutionize Your Web Design\nand Development Workflow" } @@ -374,9 +374,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#6b7280" }]} opacity={1} marginBottom={48} + color="#6b7280" textContent={ "UIMix is a open-source design tool that combines intuitive editing,\nReact integration, AI assistance, and advanced design tokens." } @@ -447,8 +447,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} + color="#ffffff" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900} @@ -464,6 +464,7 @@ export default ( id="image_1" name="image 1" hidden={false} + position={{ left: 360, top: 581 }} width={{ min: 0, max: 720 }} height="hug" topLeftRadius={10} @@ -602,8 +603,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Figma-like Intuitive Editing" fontFamily="Satoshi" fontWeight={700} @@ -619,8 +620,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Experience a user-friendly interface with familiar design tools, making it easy for both beginners and professionals to create stunning web designs." fontFamily="Inter" fontWeight={400} @@ -697,8 +698,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="React Components Import/Export" fontFamily="Satoshi" fontWeight={700} @@ -714,8 +715,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Seamlessly work with React components, boosting your design-to-development workflow.\n" } @@ -794,8 +795,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Collaboration for Everyone" fontFamily="Satoshi" fontWeight={700} @@ -811,8 +812,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Collaborate in real-time with your team, whether they're designers, developers, or stakeholders.\n" } @@ -891,8 +892,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Offline Editing Experience" fontFamily="Satoshi" fontWeight={700} @@ -908,8 +909,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Benefit from UIMix's seamless offline editing, offering local file management, hot reloading, and an uninterrupted workflow.\n\n" } @@ -988,8 +989,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="AI Assistance" fontFamily="Satoshi" fontWeight={700} @@ -1005,8 +1006,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Supercharge your design process with AI-generated and refined text contents, as well as AI-generated images that fit perfectly into your project." fontFamily="Inter" fontWeight={400} @@ -1083,8 +1084,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Figma Integration" fontFamily="Satoshi" fontWeight={700} @@ -1100,8 +1101,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent="Easily import designs from Figma and export components back to Figma, ensuring seamless collaboration between UIMix and your favorite design tool." fontFamily="Inter" fontWeight={400} @@ -1133,9 +1134,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={24} + color="#1f2937" textContent="Open Source" fontFamily="Satoshi" fontWeight={900} @@ -1151,9 +1152,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} marginBottom={48} + color="#4b5563" textContent={ "UIMix's open-source editor and backend promote community-driven development and offer extensive customization options.\nSelf-host both components for greater control over your design environment and data security." } @@ -1204,8 +1205,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} + color="#1f2937" textContent="Explore GitHub repo" fontFamily="Satoshi" fontWeight={700} @@ -1222,9 +1223,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={72} + color="#1f2937" textContent="How It Works" fontFamily="Satoshi" fontWeight={900} @@ -1258,9 +1259,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={26} + color="#1f2937" textContent="A. Start Your Project" fontFamily="Satoshi" fontWeight={700} @@ -1276,8 +1277,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Sign up for a free account or log in.\nCreate a new project or import an existing Figma design.\nOrganize your components and design tokens in the user-friendly interface." } @@ -1304,9 +1305,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={20} + color="#1f2937" textContent="B. Design & Develop" fontFamily="Satoshi" fontWeight={700} @@ -1322,8 +1323,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Utilize Figma-like editing tools to create and modify designs.\nSeamlessly import React components into your UIMix project.\nLeverage AI assistance to efficiently generate and refine your content." } @@ -1350,9 +1351,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#1f2937" }]} opacity={1} marginBottom={20} + color="#1f2937" textContent="C. Collaborate & Publish" fontFamily="Satoshi" fontWeight={700} @@ -1368,8 +1369,8 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#4b5563" }]} opacity={1} + color="#4b5563" textContent={ "Collaborate using the online editor or work offline for an optimized development experience.\nIntegrate with GitHub for streamlined version control.\nEasily import UIMix components into React apps or export final designs back to Figma." } @@ -1425,9 +1426,9 @@ export default ( hidden={false} width={{ min: 0 }} height="hug" - fills={[{ solid: "#ffffff" }]} opacity={1} marginBottom={48} + color="#ffffff" textContent="Ready to revolutionize your web design workflow?" fontFamily="Satoshi" fontWeight={900} @@ -1498,8 +1499,8 @@ export default ( hidden={false} width="hug" height="hug" - fills={[{ solid: "#3b82f6" }]} opacity={1} + color="#3b82f6" textContent="Get Early Access" fontFamily="Satoshi" fontWeight={900}