```jsx
const img2 = "https://www.figma.com/api/mcp/asset/38a77663-6bea-43bc-921e-dcee03aeb3c0";
const img3 = "https://www.figma.com/api/mcp/asset/df2d5a3c-f4e9-40a6-b80d-c5c1dda46236";
const imgEllipse4119 = "https://www.figma.com/api/mcp/asset/692934c9-c686-4cf3-bfeb-e2e4cdc1bdd3";
const img = "https://www.figma.com/api/mcp/asset/69a728c1-dffd-4aa6-91dd-d891f564fef3";
const imgProperty1 = "https://www.figma.com/api/mcp/asset/0d09fc39-0332-4f5c-bb52-b6ce4d420579";
const imgProperty2 = "https://www.figma.com/api/mcp/asset/652a7653-61f5-4880-b198-7aac3b2731e3";
const imgEllipse4120 = "https://www.figma.com/api/mcp/asset/496e5a27-805d-44de-802f-1225e026600e";
const imgUnion = "https://www.figma.com/api/mcp/asset/e6ca33f0-b03e-43ae-88da-f54cd906c64b";
const img1 = "https://www.figma.com/api/mcp/asset/910131c7-ab23-40cc-add9-7e7e8df031f5";
const imgUnion1 = "https://www.figma.com/api/mcp/asset/c8ea857b-d866-4e13-8971-91c000f3cd1e";

function icon({ className }: { className?: string }) {
  return (
    <div className={className} data-name="返回icon" data-node-id="853:111934">
      <div className="absolute aspect-[84/84] bottom-[2.38%] flex items-center justify-center left-1/2 top-[2.38%] translate-x-[-50%]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
          <div className="relative size-full" data-node-id="1412:67849">
            <div className="absolute inset-[-1.25%]">
              <img alt="" className="block max-w-none size-full" src={imgEllipse4119} />
            </div>
          </div>
        </div>
      </div>
      <div className="absolute flex inset-[31.17%_39.47%] items-center justify-center">
        <div className="flex-none h-[17.684px] rotate-[270deg] w-[31.641px]">
          <div className="relative size-full" data-name="路径" data-node-id="853:111931">
            <div className="absolute inset-[-50.89%_-28.44%]">
              <img alt="" className="block max-w-none size-full" src={img} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
type ComponentProps = {
  className?: string;
  property1?: "光线右侧" | "光线左侧";
};

function Component({ className, property1 = "光线左侧" }: ComponentProps) {
  if (property1 === "光线右侧") {
    return (
      <div className={className} data-name="Property 1=光线右侧" data-node-id="733:102120">
        <div className="absolute inset-[-225%_-14.06%]">
          <img alt="" className="block max-w-none size-full" src={imgProperty1} />
        </div>
      </div>
    );
  }
  return (
    <div className={className} data-name="Property 1=光线左侧" data-node-id="733:102121">
      <div className="absolute inset-[-225%_-14.06%]">
        <img alt="" className="block max-w-none size-full" src={imgProperty2} />
      </div>
    </div>
  );
}
type TextProps = {
  className?: string;
  propValue?: "30px";
  propValue1?: "特粗";
  propValue2?: "居中对齐";
};

function Text({ className, propValue = "30px", propValue1 = "特粗", propValue2 = "居中对齐" }: TextProps) {
  return (
    <div className={className} data-name="字号=30px, 字重=特粗, 位置=居中对齐" data-node-id="635:42953">
      <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[30px] text-center text-white whitespace-nowrap" data-node-id="635:42954">
        <p className="leading-[32px]">Text line-30px</p>
      </div>
    </div>
  );
}

function icon1({ className }: { className?: string }) {
  return (
    <div className={className} data-name="删除icon" data-node-id="853:113279">
      <div className="absolute flex inset-[2.38%] items-center justify-center">
        <div className="flex-none rotate-[180deg] scale-y-[-100%] size-[80px]">
          <div className="relative size-full" data-node-id="1799:168252">
            <div className="absolute inset-[-1.25%]">
              <img alt="" className="block max-w-none size-full" src={imgEllipse4120} />
            </div>
          </div>
        </div>
      </div>
      <div className="absolute flex inset-[31.17%_32.27%] items-center justify-center">
        <div className="flex-none h-[31.641px] rotate-[180deg] scale-y-[-100%] w-[29.787px]">
          <div className="relative size-full" data-name="Union" data-node-id="853:113278">
            <div className="absolute inset-[-28.44%_-30.21%]">
              <img alt="" className="block max-w-none size-full" src={imgUnion} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Component1({ className }: { className?: string }) {
  return (
    <div className={className} data-name="弹出框样式1" data-node-id="700:127510">
      <img alt="" className="block max-w-none size-full" src={img1} />
      <div className="absolute inset-[3.32%_1.37%]" data-name="Union" data-node-id="700:127508">
        <img alt="" className="block max-w-none size-full" src={imgUnion1} />
      </div>
    </div>
  );
}

export default function Component2() {
  return (
    <div className="bg-[rgba(33,33,33,0.6)] relative size-full" data-name="操控屏-2-种业•果蔬-果蔬首页-基地弹出数据" data-node-id="1443:70581">
      <div className="absolute backdrop-blur-[5px] backdrop-filter bg-[rgba(35,31,32,0.5)] h-[1080px] left-[-0.5px] top-[0.13px] w-[1920px]" data-name="遮罩层" data-node-id="I1443:70581;1412:182610" />
      <Component1 className="absolute h-[900px] left-1/2 top-[calc(50%+-6.28px)] translate-x-[-50%] translate-y-[-50%] w-[1600px]" />
      <div className="absolute flex items-center justify-center right-[149px] size-[40px] top-[80px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <icon1 className="relative size-[40px]" />
        </div>
      </div>
      <div className="absolute contents left-[calc(50%+-0.06px)] top-[calc(50%+48.26px)] translate-x-[-50%] translate-y-[-50%]" data-name="图片" data-node-id="I1443:70581;1412:182635">
        <div className="absolute h-[640px] left-[calc(50%+-0.06px)] overflow-clip rounded-[20px] top-[calc(50%+48.26px)] translate-x-[-50%] translate-y-[-50%] w-[1357px]" data-name="图片样式1" data-node-id="I1443:70581;1699:124081">
          <div className="absolute content-stretch flex gap-[20px] items-center left-0 top-1/2 translate-y-[-50%]" data-node-id="I1443:70581;1699:124082">
            <div className="h-[640px] overflow-clip relative rounded-[10px] shrink-0 w-[853px]" data-name="图片1" data-node-id="I1443:70581;1699:124083">
              <div className="absolute h-[640px] left-0 top-1/2 translate-y-[-50%] w-[853.333px]" data-name="湖北农发种业老河口张集镇小麦种业示范基地 1" data-node-id="I1443:70581;1699:124532">
                <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img2} />
              </div>
            </div>
            <div className="h-[640px] overflow-clip relative rounded-[10px] shrink-0 w-[940px]" data-name="图片2" data-node-id="I1443:70581;1699:124085">
              <div className="absolute h-[640px] left-0 top-1/2 translate-y-[-50%] w-[1137.778px]" data-name="老河口张集镇小麦种业示范基地 1" data-node-id="I1443:70581;1699:124526">
                <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img3} />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="absolute contents inset-[926.48px_281.56px_147.52px_281.44px]" data-name="下拉框" data-node-id="I1443:70581;1699:124617">
        <div className="absolute flex inset-[926.48px_281.56px_147.52px_281.44px] items-center justify-center">
          <div className="flex-none h-[1357px] rotate-[270deg] w-[6px]">
            <div className="bg-[rgba(255,255,255,0.12)] rounded-[12px] shadow-[0px_40px_70px_0px_rgba(0,0,0,0.24)] size-full" data-name="bg" data-node-id="I1443:70581;1699:124618" />
          </div>
        </div>
        <div className="absolute flex inset-[926.48px_745.3px_147.52px_281.44px] items-center justify-center">
          <div className="flex-none h-[893.259px] rotate-[270deg] w-[6px]">
            <div className="bg-[rgba(255,255,255,0.12)] rounded-[10px] shadow-[0px_40px_70px_0px_rgba(0,0,0,0.24)] size-full" data-name="bg" data-node-id="I1443:70581;1699:124619" />
          </div>
        </div>
      </div>
      <div className="absolute content-stretch flex gap-[30px] h-[125px] items-center justify-center left-1/2 top-[123.22px] translate-x-[-50%] w-[1200px]" data-name="标题" data-node-id="I1443:70581;1412:182646">
        <Component className="h-[4px] relative shrink-0 w-[64px]" />
        <Text className="box-border content-stretch flex gap-[10px] items-center justify-center px-0 py-[4px] relative shrink-0" />
        <Component className="h-[4px] relative shrink-0 w-[64px]" property1="光线右侧" />
      </div>
      <div className="absolute flex items-center justify-center left-[1770px] size-[90px] top-[900px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <icon className="relative size-[90px]" />
        </div>
      </div>
    </div>
  );
}
```

SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.

Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.
These styles are contained in the design: 主色/产业-种业: #5DEF8B, 渐变/2-蓝色: .
Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.
IMPORTANT: After you call this tool, you MUST call get_screenshot to get a screenshot of the node for context.
