figma-to-code-agent 0.3.0

package/test-app/test-react/src/Component.module.css

@@ -0,0 +1,572 @@
+.responsive-wrapper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.scale-container {
+  width: 1920px;
+  height: 1080px;
+  transform-origin: top left;
+}
+
+.element {
+  position: relative;
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.group2526 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 1920px;
+  height: 1080px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.text {
+  position: absolute;
+  left: 385px;
+  top: 280px;
+  width: 360px;
+  height: 239px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 180px;
+  font-weight: 300;
+  line-height: 239px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.miui-miui12 {
+  position: absolute;
+  left: 396px;
+  top: 788px;
+  width: 700px;
+  height: 58px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 29px;
+  text-align: justified;
+  color: rgba(255, 255, 255, 0.699999988079071);
+}
+
+.miui12 {
+  position: absolute;
+  left: 396px;
+  top: 643px;
+  width: 416px;
+  height: 129px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 43px;
+  letter-spacing: 2px;
+  text-align: left;
+  color: rgba(255, 255, 255, 1);
+}
+
+.rectangle28 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 1920px;
+  height: 1080px;
+  background-color: rgba(0, 0, 0, 0.4000000059604645);
+}
+
+.group2523 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.mask-group {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.mask-group-1 {
+  position: absolute;
+  left: 50px;
+  top: 425px;
+  width: 597px;
+  height: 597px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.mars-methane2 {
+  position: absolute;
+  left: -202px;
+  top: -22px;
+  width: 969px;
+  height: 640px;
+  object-fit: cover;
+  display: block;
+}
+
+.rectangle30 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  background-color: rgba(0, 0, 0, 0.30000001192092896);
+}
+
+.text-1 {
+  position: absolute;
+  left: 70px;
+  top: 250px;
+  width: 104px;
+  height: 440px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 100px;
+  font-weight: 300;
+  line-height: 110px;
+  text-align: left;
+  color: rgba(255, 255, 255, 1);
+}
+
+.group2512 {
+  position: absolute;
+  left: 70px;
+  top: 946px;
+  width: 26px;
+  height: 46px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.element-1 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 26px;
+  height: 34px;
+  font-family: 'Mitype', sans-serif;
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 34px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.rectangle38 {
+  position: absolute;
+  left: 2px;
+  top: 44px;
+  width: 14px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.group2527 {
+  position: absolute;
+  left: 384px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.text-2 {
+  position: absolute;
+  left: 70px;
+  top: 250px;
+  width: 104px;
+  height: 440px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 100px;
+  font-weight: 300;
+  line-height: 110px;
+  text-align: left;
+  color: rgba(255, 255, 255, 1);
+}
+
+.group2512-1 {
+  position: absolute;
+  left: 70px;
+  top: 946px;
+  width: 30px;
+  height: 46px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.element-2 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 30px;
+  height: 34px;
+  opacity: 0.5;
+  font-family: 'Mitype', sans-serif;
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 34px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.rectangle38-1 {
+  position: absolute;
+  left: 2px;
+  top: 44px;
+  width: 14px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 1);
+  opacity: 0.4000000059604645;
+}
+
+.group2528 {
+  position: absolute;
+  left: 768px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.mask-group-2 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  object-fit: cover;
+  display: block;
+}
+
+.text-3 {
+  position: absolute;
+  left: 70px;
+  top: 250px;
+  width: 104px;
+  height: 440px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 100px;
+  font-weight: 300;
+  line-height: 110px;
+  text-align: left;
+  color: rgba(255, 255, 255, 1);
+}
+
+.group2512-2 {
+  position: absolute;
+  left: 70px;
+  top: 946px;
+  width: 30px;
+  height: 46px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.element-3 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 30px;
+  height: 34px;
+  font-family: 'Mitype', sans-serif;
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 34px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.rectangle38-2 {
+  position: absolute;
+  left: 2px;
+  top: 44px;
+  width: 14px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.group2529 {
+  position: absolute;
+  left: 1152px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.text-4 {
+  position: absolute;
+  left: 70px;
+  top: 250px;
+  width: 104px;
+  height: 440px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 100px;
+  font-weight: 300;
+  line-height: 110px;
+  text-align: left;
+  color: rgba(255, 255, 255, 1);
+}
+
+.group2512-3 {
+  position: absolute;
+  left: 70px;
+  top: 946px;
+  width: 31px;
+  height: 46px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.element-4 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 31px;
+  height: 34px;
+  opacity: 0.5;
+  font-family: 'Mitype', sans-serif;
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 34px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.rectangle38-3 {
+  position: absolute;
+  left: 2px;
+  top: 44px;
+  width: 14px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 1);
+  opacity: 0.4000000059604645;
+}
+
+.group2530 {
+  position: absolute;
+  left: 1536px;
+  top: 0px;
+  width: 384px;
+  height: 1080px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.text-5 {
+  position: absolute;
+  left: 70px;
+  top: 250px;
+  width: 104px;
+  height: 440px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 100px;
+  font-weight: 300;
+  line-height: 110px;
+  text-align: left;
+  color: rgba(255, 255, 255, 1);
+}
+
+.group2512-4 {
+  position: absolute;
+  left: 70px;
+  top: 946px;
+  width: 30px;
+  height: 46px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.element-5 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 30px;
+  height: 34px;
+  opacity: 0.5;
+  font-family: 'Mitype', sans-serif;
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 34px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.rectangle38-4 {
+  position: absolute;
+  left: 2px;
+  top: 44px;
+  width: 14px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 1);
+  opacity: 0.4000000059604645;
+}
+
+.group2608 {
+  position: absolute;
+  left: 384px;
+  top: 0px;
+  width: 1153px;
+  height: 1080px;
+  object-fit: cover;
+  display: block;
+}
+
+.group2524 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 1920px;
+  height: 170px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.rectangle44 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 1920px;
+  height: 170px;
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.group {
+  position: absolute;
+  left: 396px;
+  top: 80px;
+  width: 70px;
+  height: 16px;
+  object-fit: cover;
+  display: block;
+}
+
+.group9 {
+  position: absolute;
+  left: 940px;
+  top: 75px;
+  width: 488px;
+  height: 21px;
+  overflow: hidden;
+  background-color: inherit;
+}
+
+.text-6 {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 32px;
+  height: 21px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.text-7 {
+  position: absolute;
+  left: 72px;
+  top: 0px;
+  width: 32px;
+  height: 21px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.text-8 {
+  position: absolute;
+  left: 144px;
+  top: 0px;
+  width: 48px;
+  height: 21px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  text-align: left;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.text-9 {
+  position: absolute;
+  left: 424px;
+  top: 0px;
+  width: 64px;
+  height: 21px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  text-align: right;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.text-10 {
+  position: absolute;
+  left: 336px;
+  top: 0px;
+  width: 48px;
+  height: 21px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  text-align: right;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.text-11 {
+  position: absolute;
+  left: 232px;
+  top: 0px;
+  width: 64px;
+  height: 21px;
+  font-family: 'MI Lan Pro', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  text-align: right;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 1);
+}
+
+.group10 {
+  position: absolute;
+  left: 1504px;
+  top: 76px;
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  display: block;
+}

package/test-app/test-react/src/Homepage.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import styles from './Homepage.module.css'
+import imgjonathan_kemper_1hhrdiolfpu_unsplash_1 from './assets/jonathan-kemper-1hhrdiolfpu-unsplash-1.png'
+import imgstocksy_txp226f62b2ane300_medium_4582193_1 from './assets/stocksy_txp226f62b2ane300_medium_4582193-1.png'
+
+export function Homepage(props) {
+    return (
+      <div className={styles['homepage']}>
+        {/* wereFarmersPurveyors */}
+      <span className={styles['were-farmers-purveyors']}>We’re farmers, purveyors, and eaters of organically grown food.</span>
+      {/* button */}
+      <div className={styles['button']}>
+          {/* browseOurShop */}
+        <span className={styles['browse-our-shop']}>Browse our shop</span>
+        </div>
+      {/* weBelieveIn */}
+      <span className={styles['we-believe-in']}>We believe in produce. Tasty produce. Produce like:
+
+      Apples. Oranges. Limes. Lemons. Guavas. Carrots. Cucumbers. Jicamas. Cauliflowers. Brussels sprouts. Shallots. Japanese eggplants. Asparagus. Artichokes—Jerusalem artichokes, too. Radishes. Broccoli. Baby broccoli. Broccolini. Bok choy. Scallions. Ginger. Cherries. Raspberries. Cilantro. Parsley. Dill. 
+
+      What are we forgetting?
+
+      Oh! Onions. Yams. Avocados. Lettuce. Arugula (to some, “rocket”). Persian cucumbers, in addition to aforementioned “normal” cucumbers. Artichokes. Zucchinis. Pumpkins. Squash (what some cultures call pumpkins). Sweet potatoes and potato-potatoes. Jackfruit. Monk fruit. Fruit of the Loom. Fruits of our labor (this website). Sorrel. Pineapple. Mango. Gooseberries. Blackberries. Tomatoes. Heirloom tomatoes. Beets. Chives. Corn. Endive. Escarole, which, we swear, we’re vendors of organic produce, but if you asked us to describe what escaroles are...</span>
+      {/* whatWeBelieve */}
+      <span className={styles['what-we-believe']}>WHAT WE BELIEVE</span>
+      {/* jonathanKemper1hhrdiolfpu */}
+      <img className={styles['jonathan-kemper1hhrdiolfpu']} src={imgjonathan_kemper_1hhrdiolfpu_unsplash_1} alt="jonathanKemper1hhrdiolfpu" />
+      {/* centralCaliforniaThe */}
+      <span className={styles['central-california-the']}>Central California — The person who grew these was located in Central California and, er, hopefully very well-compensated.</span>
+      {/* header */}
+      <div className={styles['header']}>
+          {/* worldPeas */}
+        <span className={styles['world-peas']}>World Peas</span>
+        {/* shop */}
+        <span className={styles['shop']}>Shop</span>
+        {/* newstand */}
+        <span className={styles['newstand']}>Newstand</span>
+        {/* whoWeAre */}
+        <span className={styles['who-we-are']}>Who we are</span>
+        {/* myProfile */}
+        <span className={styles['my-profile']}>My profile</span>
+        {/* cartButton */}
+        <div className={styles['cart-button']}>
+            {/* basket3 */}
+          <span className={styles['basket3']}>Basket (3)</span>
+          </div>
+        </div>
+      {/* stocksyTxp226f62b2ane300Medium */}
+      <img className={styles['stocksy-txp226f62b2ane300medium']} src={imgstocksy_txp226f62b2ane300_medium_4582193_1} alt="stocksyTxp226f62b2ane300Medium" />
+      </div>
+    )
+  }
+