以下为本文档的中文说明acreage-farming 是一个专注于构建精准农业precision farming着陆页的前端技能专为农业科技agritech营销网站设计。它能生成一个完整的、高视觉品质的农业科技单页网站核心视觉元素包括暗色与亮色交替的区块布局、全屏英雄视频背景、带动画的统计数字网格、无限滚动的 Logo 走马灯以及图片背景的服务卡片整体设计现代而专业。使用场景包括农业科技初创公司需要快速建立品牌官网时精准农业服务商需要展示其技术能力和数据成果时农业设备制造商需要营销推广新产品时农业展会和活动需要临时搭建展示页面时投资者关系页面需要呈现农业科技投资亮点时农业咨询公司需要展示案例研究和客户见证时农业合作社需要展示智慧农业解决方案时。核心特点包括一是提供了完整的参考实现example.html开发者可以直接复制并修改文案和数据进行快速适配极大缩短从设计到上线的时间周期二是采用深色与浅色交替的区块设计营造专业高端的视觉层次感有效引导用户的浏览视线和信息获取顺序三是全屏视频背景和动画统计数字等现代网页元素增强用户的沉浸感和品牌信任度提升转化率四是无限滚动 Logo 走马灯有效展示合作伙伴和客户群体增强社会认同感五是配色方案、字体、圆角、动画等视觉参数已预先锁定确保设计一致性无需从零开始构思视觉风格。这个技能让精准农业领域的企业能够快速获得专业级的品牌展示页面。Acreage Farming — Precision Agriculture Landing PageProduce a premiumprecision-farming landing pagewithdark/light alternating sections, afullscreen hero video background, ananimated stats grid, aninfinite logo marquee, andimage-backed service cards. A complete, rendered reference implementation ships beside this skill atexample.html—start from it. Copyexample.html, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, layout, reveal animation, marquee, and responsive behavior below.This is the authoritative build brief. Follow it exactly — the named colors, radii, fonts, and animations are locked.StackDefault output: a single self-contained HTML file (theexample.htmlseed). It already includes everything inline.If the user explicitly asks for aReact TypeScript Vite Tailwindproject, port the seed faithfully: same tokens, same section order, same markup structure. Map vanilla features back up: theIntersectionObserverreveal → Framer-MotionwhileInView; the passive scroll listener that toggles.scrolledon the nav →useScroll; the CSS marquee → a Framer-Motion loop or duplicated-track CSS keyframe. Do not change the design while porting.Motion loading (locked).If you emit a single self-contained inline-JSX file instead of the Vite project, Motion’s React hooks (useScroll,useTransform,useAnimationFrame, …) exist only in theReactUMD build: loadscript srchttps://unpkg.com/framer-motion11.11.13/dist/framer-motion.js/scriptand read them offwindow.Motion— never the vanillahttps://unpkg.com/motion.../dist/motion.jsDOM bundle, which lacksuseScrolland renders a blank page. (The Vite project imports from npm and is unaffected.)FontsLoad from Google Fonts:Manrope(weights 400, 500, 600, 700, 800) for UI/body andInstrument Serif(regular italic) for editorial accent words. Manrope is the default body face; Instrument Serif italic is used only for the one or two emphasized words in the hero headline (span classserif italic).CSS Variables (:root) — locked--bg-dark: #0d120e; --bg-darker: #080b09; --bg-light: #f3f0e7; --bg-cream: #e9e4d6; --green: #6b8e3a; --green-bright: #9ec94a; --green-deep: #2e3b22; --soil: #c9a06a; --text-light: #f3f0e7; --text-muted-light: rgba(243,240,231,0.6); --text-dark: #1a1f17; --text-muted-dark: rgba(26,31,23,0.55); --radius: 28px; --radius-lg: 40px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);Body: Manrope,background: var(--bg-dark),color: var(--text-light),overflow-x: hidden.html { scroll-behavior: smooth }. The page isdark by default; only the stats section uses the light/cream palette.Sections (in order)1. Nav (fixed)Pill that shrinks on scroll. At top: transparent, max-width 1240px, padding22px 32px. AfterscrollY 40it gets.scrolled: floats inward (top:14px; left:16px; right:16px), gainsrgba(8,11,9,0.72)backdrop-filter: blur(14px), a 1pxrgba(243,240,231,0.08)border, andborder-radius:100px. Left: brand a30pxgradient-mark (linear-gradient(135deg, var(--green-bright), var(--green))) holding an inline wheat/sprout SVG “Acreage”. Center: nav-links (Platform, Data, Services, Pricing), hidden ≤980px. Right: green-bright pill CTA “Book a demo”.2. Hero (fullscreen, video background)min-height:100vh, content bottom-aligned. Avideo autoplay muted loop playsinlinefillsinset:0withobject-fit:coverand a poster still. A gradient::after(top transparent → bottomrgba(8,11,9,0.92)) keeps text legible. Headline:clamp(3rem, 8vw, 6.5rem), weight 800,letter-spacing:-0.03em, with one word in Instrument Serif italic (“every”). Sub-paragraph in--text-muted-light. Actions: green-bright primary button ghost outline “Watch the film”. Below: a hero-meta row of three big stats(2.4M acres,31% yield lift,−40% water).Hero video:https://plugin-assets.open-design.ai/plugins/aerocore/23211-720-e83442.mp4(large stable CDN — keep as remote URL). Poster: an Unsplash aerial-field still (remote URL OK).3. Logo marqueeFull-width band on--bg-darker, topbottom hairline borders. Centered uppercase label, then aninfinite horizontal marquee: a.marquee-trackof duplicated partner logos animatedtranslateX(0 → -50%)over32s linear infinite, paused on hover, edge-masked with alinear-gradientCSS mask. The track is built in JS by duplicating an 8-name partner array, each rendered as an inline leaf SVG name. Logos are text inline SVG only —no remote logo images.4. Stats (light section).section-lightflips to the cream palette (--bg-lightbg,--text-darktext, green eyebrow). Header row: eyebrow bigh2on the left, descriptive paragraph on the right. Then a4-column stat grid(repeat(4,1fr), gap 20px). Each.stat-cardis white, rounded--radius, min-height 220px, with an icon chip (top), a bigstat-num(3rem, weight 800, with a smaller.unitspan for %/k) pushed to the bottom viamargin-top:auto, and a label.The first card has.accent→--green-deepbackground, light text, tinted icon chip. Hover lifts cardstranslateY(-6px)with a soft shadow. Icons are inline SVG (refresh-cycle, trend-up, droplet, clock). Values:98%coverage,31%yield,40%water,11kautonomous hours.5. Services (dark, image cards)Back to--bg-dark. Centered head (eyebrow h2 paragraph).3-column gridof.svc-card, eachmin-height:420px,--radius-lg, an absolutely-positioned.svc-bgimage that scales1.06on hover, a bottom gradient scrim, and bottom-aligned body: a green-tinted.svc-tagchip,h3, paragraph, and a green-bright “arrow” link. Three cards:Sensing(satellite drone scouting),Deciding(variable-rate prescriptions),Acting(autonomous machinery). Card background images are Unsplash farm stills (remote URLs OK — large stable CDN).6. CTABand on--bg-darkercontaining a rounded-48px panel with alinear-gradient(135deg, var(--green-deep), #1c2616)fill, a green radial glow::before, eyebrow, huge headline (“Put your fields on autopilot.”), one line of copy, and a green-bright primary button.7. Footer--bg-darker, top hairline. Left: brand mark one-line mission. Right: three link columns (Platform / Company / Resources). Bottom bar: copyright legal links, separated by a hairline.AnimationsReveal: every.revealelement startsopacity:0; translateY(34px)and transitions to visible over0.9s var(--ease)when it enters the viewport. Implemented with oneIntersectionObserver(threshold:0.15,rootMargin:0px 0px -8% 0px, unobserve after firing). A small stagger is applied viatransitionDelay (index % 4) * 0.07s. In a React port this iswhileInViewviewport{{ once: true }}.Nav shrink: passivescrolllistener toggles.scrolledatscrollY 40.Marquee:keyframes scroll-x { translateX(0) → translateX(-50%) },32s linear infinite,animation-play-state: pausedon:hover.Hover: buttons lifttranslateY(-2/-3px)with green glow shadow; stat-cards and svc-cards lifttranslateY(-6px); service background images scale1.06over0.8s.All interactive transitions use--transition(0.5s cubic-bezier(0.22, 1, 0.36, 1)).Assets / hostsInline (do not fetch remote):all icons and partner logos areinline SVG. The brand mark, stat icons, service arrows, and marquee leaf are inline SVG. There areno avatar imagesin this template.Keep remote (large stable CDN):the hero.mp4oncdn.coverr.co, and the Unsplash hero poster service-card stills onimages.unsplash.com. These may stay as URLs.Neverintroducei.pravatar.cc,api.dicebear.com, or any remote avatar host — none are needed here and they 403 in the sandbox.Responsive≤980px: stats grid → 2 columns, services grid → 1 column, nav-links hidden.≤620px:.wrappadding0 20px, stats grid → 1 column, tighter hero-meta gap, CTA panel padding reduced.Color Rules — hardEarthy agritech palette only: deep greens (--green,--green-bright #9ec94a,--green-deep), near-black greens (--bg-dark #0d120e,--bg-darker #080b09), warm cream/off-white (--bg-light #f3f0e7,--bg-cream), and a soil tan accent (--soil #c9a06a).--green-bright #9ec94ais the locked accent— do not substitute blue/teal/purple. Light text on dark, dark text on cream; all contrast-safe.3e:[“,,,L41”,null,{“content”:“$42”,“frontMatter”:{“name”:“acreage-farming”,“description”:“Use this plugin when the user wants a premium precision-farming / agritech landing page: dark/light alternating sections, a fullscreen hero video background, an animated stats grid, an infinite logo marquee, and image-backed service cards. Invoke for ‘farming landing page’, ‘agritech marketing site’, ‘precision agriculture site’, or when the user references the Acreage Farming template.”,“version”:“0.1.0”,“od”:{“mode”:“prototype”,“surface”:“web”,“scenario”:“design”,“preview”:{“type”:“html”,“entry”:“example.html”},“design_system”:{“requires”:false}}}}]3f:[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[[”,“div”,null,{“className”:“flex items-center justify-between border-b border-border bg-muted/30 px-4 py-2.5”,“children”:[[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[”,“span”,null,{“className”:“truncate text-xs font-medium text-muted-foreground”,“children”:“同仓库更多 Skills”}]}],[“KaTeX parse error: Expected EOF, got } at position 88: …ldren:同仓库}]]}̲],[”,“div”,null,{“className”:“p-4 sm:p-5”,“children”:[[“,h2,null,id:related−skills−heading,className:text−2xlfont−semiboldtracking−normaltext−foreground,children:同仓库更多Skills],[,h2,null,{id:related-skills-heading,className:text-2xl font-semibold tracking-normal text-foreground,children:同仓库更多 Skills}],[,h2,null,id:related−skills−heading,className:text−2xlfont−semiboldtracking−normaltext−foreground,children:同仓库更多Skills],[”,“div”,null,{“className”:“mt-4 grid gap-3 sm:grid-cols-2”,“children”:[“L43,L43,L43,L44”,“L45,L45,L45,L46”,“L47,L47,L47,L48”]}]]}]]}]49:I[206516,[“/_next/static/chunks/051aanbhrv4br.js”,“/_next/static/chunks/0mizr60h7ayzt.js”,“/_next/static/chunks/0v9lm1dmbdoo-.js”,“/_next/static/chunks/0rxr1j1j3j-.r.js”,“/_next/static/chunks/02ftybezfvqjd.js”,“/_next/static/chunks/0.v9ksvnnj8ia.js”,“/_next/static/chunks/0bn6id96nx3k.js,“/_next/static/chunks/13ybnhn37c.tc.js”,“/_next/static/chunks/0_fnrdtruz8uf.js”,“/_next/static/chunks/0r6l15utt1mwb.js”,“/_next/static/chunks/0dm9a5into854.js”,/_next/static/chunks/07k6hqoibtcn.js”,“/next/static/chunks/0b4cao.4y…j.js”,“/_next/static/chunks/02i-n28z7kjd0.js”],“default”]
以下为本文档的中文说明acreage-farming 是一个专注于构建精准农业precision farming着陆页的前端技能专为农业科技agritech营销网站设计。它能生成一个完整的、高视觉品质的农业科技单页网站核心视觉元素包括暗色与亮色交替的区块布局、全屏英雄视频背景、带动画的统计数字网格、无限滚动的 Logo 走马灯以及图片背景的服务卡片整体设计现代而专业。使用场景包括农业科技初创公司需要快速建立品牌官网时精准农业服务商需要展示其技术能力和数据成果时农业设备制造商需要营销推广新产品时农业展会和活动需要临时搭建展示页面时投资者关系页面需要呈现农业科技投资亮点时农业咨询公司需要展示案例研究和客户见证时农业合作社需要展示智慧农业解决方案时。核心特点包括一是提供了完整的参考实现example.html开发者可以直接复制并修改文案和数据进行快速适配极大缩短从设计到上线的时间周期二是采用深色与浅色交替的区块设计营造专业高端的视觉层次感有效引导用户的浏览视线和信息获取顺序三是全屏视频背景和动画统计数字等现代网页元素增强用户的沉浸感和品牌信任度提升转化率四是无限滚动 Logo 走马灯有效展示合作伙伴和客户群体增强社会认同感五是配色方案、字体、圆角、动画等视觉参数已预先锁定确保设计一致性无需从零开始构思视觉风格。这个技能让精准农业领域的企业能够快速获得专业级的品牌展示页面。Acreage Farming — Precision Agriculture Landing PageProduce a premiumprecision-farming landing pagewithdark/light alternating sections, afullscreen hero video background, ananimated stats grid, aninfinite logo marquee, andimage-backed service cards. A complete, rendered reference implementation ships beside this skill atexample.html—start from it. Copyexample.html, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, layout, reveal animation, marquee, and responsive behavior below.This is the authoritative build brief. Follow it exactly — the named colors, radii, fonts, and animations are locked.StackDefault output: a single self-contained HTML file (theexample.htmlseed). It already includes everything inline.If the user explicitly asks for aReact TypeScript Vite Tailwindproject, port the seed faithfully: same tokens, same section order, same markup structure. Map vanilla features back up: theIntersectionObserverreveal → Framer-MotionwhileInView; the passive scroll listener that toggles.scrolledon the nav →useScroll; the CSS marquee → a Framer-Motion loop or duplicated-track CSS keyframe. Do not change the design while porting.Motion loading (locked).If you emit a single self-contained inline-JSX file instead of the Vite project, Motion’s React hooks (useScroll,useTransform,useAnimationFrame, …) exist only in theReactUMD build: loadscript srchttps://unpkg.com/framer-motion11.11.13/dist/framer-motion.js/scriptand read them offwindow.Motion— never the vanillahttps://unpkg.com/motion.../dist/motion.jsDOM bundle, which lacksuseScrolland renders a blank page. (The Vite project imports from npm and is unaffected.)FontsLoad from Google Fonts:Manrope(weights 400, 500, 600, 700, 800) for UI/body andInstrument Serif(regular italic) for editorial accent words. Manrope is the default body face; Instrument Serif italic is used only for the one or two emphasized words in the hero headline (span classserif italic).CSS Variables (:root) — locked--bg-dark: #0d120e; --bg-darker: #080b09; --bg-light: #f3f0e7; --bg-cream: #e9e4d6; --green: #6b8e3a; --green-bright: #9ec94a; --green-deep: #2e3b22; --soil: #c9a06a; --text-light: #f3f0e7; --text-muted-light: rgba(243,240,231,0.6); --text-dark: #1a1f17; --text-muted-dark: rgba(26,31,23,0.55); --radius: 28px; --radius-lg: 40px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);Body: Manrope,background: var(--bg-dark),color: var(--text-light),overflow-x: hidden.html { scroll-behavior: smooth }. The page isdark by default; only the stats section uses the light/cream palette.Sections (in order)1. Nav (fixed)Pill that shrinks on scroll. At top: transparent, max-width 1240px, padding22px 32px. AfterscrollY 40it gets.scrolled: floats inward (top:14px; left:16px; right:16px), gainsrgba(8,11,9,0.72)backdrop-filter: blur(14px), a 1pxrgba(243,240,231,0.08)border, andborder-radius:100px. Left: brand a30pxgradient-mark (linear-gradient(135deg, var(--green-bright), var(--green))) holding an inline wheat/sprout SVG “Acreage”. Center: nav-links (Platform, Data, Services, Pricing), hidden ≤980px. Right: green-bright pill CTA “Book a demo”.2. Hero (fullscreen, video background)min-height:100vh, content bottom-aligned. Avideo autoplay muted loop playsinlinefillsinset:0withobject-fit:coverand a poster still. A gradient::after(top transparent → bottomrgba(8,11,9,0.92)) keeps text legible. Headline:clamp(3rem, 8vw, 6.5rem), weight 800,letter-spacing:-0.03em, with one word in Instrument Serif italic (“every”). Sub-paragraph in--text-muted-light. Actions: green-bright primary button ghost outline “Watch the film”. Below: a hero-meta row of three big stats(2.4M acres,31% yield lift,−40% water).Hero video:https://plugin-assets.open-design.ai/plugins/aerocore/23211-720-e83442.mp4(large stable CDN — keep as remote URL). Poster: an Unsplash aerial-field still (remote URL OK).3. Logo marqueeFull-width band on--bg-darker, topbottom hairline borders. Centered uppercase label, then aninfinite horizontal marquee: a.marquee-trackof duplicated partner logos animatedtranslateX(0 → -50%)over32s linear infinite, paused on hover, edge-masked with alinear-gradientCSS mask. The track is built in JS by duplicating an 8-name partner array, each rendered as an inline leaf SVG name. Logos are text inline SVG only —no remote logo images.4. Stats (light section).section-lightflips to the cream palette (--bg-lightbg,--text-darktext, green eyebrow). Header row: eyebrow bigh2on the left, descriptive paragraph on the right. Then a4-column stat grid(repeat(4,1fr), gap 20px). Each.stat-cardis white, rounded--radius, min-height 220px, with an icon chip (top), a bigstat-num(3rem, weight 800, with a smaller.unitspan for %/k) pushed to the bottom viamargin-top:auto, and a label.The first card has.accent→--green-deepbackground, light text, tinted icon chip. Hover lifts cardstranslateY(-6px)with a soft shadow. Icons are inline SVG (refresh-cycle, trend-up, droplet, clock). Values:98%coverage,31%yield,40%water,11kautonomous hours.5. Services (dark, image cards)Back to--bg-dark. Centered head (eyebrow h2 paragraph).3-column gridof.svc-card, eachmin-height:420px,--radius-lg, an absolutely-positioned.svc-bgimage that scales1.06on hover, a bottom gradient scrim, and bottom-aligned body: a green-tinted.svc-tagchip,h3, paragraph, and a green-bright “arrow” link. Three cards:Sensing(satellite drone scouting),Deciding(variable-rate prescriptions),Acting(autonomous machinery). Card background images are Unsplash farm stills (remote URLs OK — large stable CDN).6. CTABand on--bg-darkercontaining a rounded-48px panel with alinear-gradient(135deg, var(--green-deep), #1c2616)fill, a green radial glow::before, eyebrow, huge headline (“Put your fields on autopilot.”), one line of copy, and a green-bright primary button.7. Footer--bg-darker, top hairline. Left: brand mark one-line mission. Right: three link columns (Platform / Company / Resources). Bottom bar: copyright legal links, separated by a hairline.AnimationsReveal: every.revealelement startsopacity:0; translateY(34px)and transitions to visible over0.9s var(--ease)when it enters the viewport. Implemented with oneIntersectionObserver(threshold:0.15,rootMargin:0px 0px -8% 0px, unobserve after firing). A small stagger is applied viatransitionDelay (index % 4) * 0.07s. In a React port this iswhileInViewviewport{{ once: true }}.Nav shrink: passivescrolllistener toggles.scrolledatscrollY 40.Marquee:keyframes scroll-x { translateX(0) → translateX(-50%) },32s linear infinite,animation-play-state: pausedon:hover.Hover: buttons lifttranslateY(-2/-3px)with green glow shadow; stat-cards and svc-cards lifttranslateY(-6px); service background images scale1.06over0.8s.All interactive transitions use--transition(0.5s cubic-bezier(0.22, 1, 0.36, 1)).Assets / hostsInline (do not fetch remote):all icons and partner logos areinline SVG. The brand mark, stat icons, service arrows, and marquee leaf are inline SVG. There areno avatar imagesin this template.Keep remote (large stable CDN):the hero.mp4oncdn.coverr.co, and the Unsplash hero poster service-card stills onimages.unsplash.com. These may stay as URLs.Neverintroducei.pravatar.cc,api.dicebear.com, or any remote avatar host — none are needed here and they 403 in the sandbox.Responsive≤980px: stats grid → 2 columns, services grid → 1 column, nav-links hidden.≤620px:.wrappadding0 20px, stats grid → 1 column, tighter hero-meta gap, CTA panel padding reduced.Color Rules — hardEarthy agritech palette only: deep greens (--green,--green-bright #9ec94a,--green-deep), near-black greens (--bg-dark #0d120e,--bg-darker #080b09), warm cream/off-white (--bg-light #f3f0e7,--bg-cream), and a soil tan accent (--soil #c9a06a).--green-bright #9ec94ais the locked accent— do not substitute blue/teal/purple. Light text on dark, dark text on cream; all contrast-safe.3e:[“,,,L41”,null,{“content”:“$42”,“frontMatter”:{“name”:“acreage-farming”,“description”:“Use this plugin when the user wants a premium precision-farming / agritech landing page: dark/light alternating sections, a fullscreen hero video background, an animated stats grid, an infinite logo marquee, and image-backed service cards. Invoke for ‘farming landing page’, ‘agritech marketing site’, ‘precision agriculture site’, or when the user references the Acreage Farming template.”,“version”:“0.1.0”,“od”:{“mode”:“prototype”,“surface”:“web”,“scenario”:“design”,“preview”:{“type”:“html”,“entry”:“example.html”},“design_system”:{“requires”:false}}}}]3f:[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[[”,“div”,null,{“className”:“flex items-center justify-between border-b border-border bg-muted/30 px-4 py-2.5”,“children”:[[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[”,“span”,null,{“className”:“truncate text-xs font-medium text-muted-foreground”,“children”:“同仓库更多 Skills”}]}],[“KaTeX parse error: Expected EOF, got } at position 88: …ldren:同仓库}]]}̲],[”,“div”,null,{“className”:“p-4 sm:p-5”,“children”:[[“,h2,null,id:related−skills−heading,className:text−2xlfont−semiboldtracking−normaltext−foreground,children:同仓库更多Skills],[,h2,null,{id:related-skills-heading,className:text-2xl font-semibold tracking-normal text-foreground,children:同仓库更多 Skills}],[,h2,null,id:related−skills−heading,className:text−2xlfont−semiboldtracking−normaltext−foreground,children:同仓库更多Skills],[”,“div”,null,{“className”:“mt-4 grid gap-3 sm:grid-cols-2”,“children”:[“L43,L43,L43,L44”,“L45,L45,L45,L46”,“L47,L47,L47,L48”]}]]}]]}]49:I[206516,[“/_next/static/chunks/051aanbhrv4br.js”,“/_next/static/chunks/0mizr60h7ayzt.js”,“/_next/static/chunks/0v9lm1dmbdoo-.js”,“/_next/static/chunks/0rxr1j1j3j-.r.js”,“/_next/static/chunks/02ftybezfvqjd.js”,“/_next/static/chunks/0.v9ksvnnj8ia.js”,“/_next/static/chunks/0bn6id96nx3k.js,“/_next/static/chunks/13ybnhn37c.tc.js”,“/_next/static/chunks/0_fnrdtruz8uf.js”,“/_next/static/chunks/0r6l15utt1mwb.js”,“/_next/static/chunks/0dm9a5into854.js”,/_next/static/chunks/07k6hqoibtcn.js”,“/next/static/chunks/0b4cao.4y…j.js”,“/_next/static/chunks/02i-n28z7kjd0.js”],“default”]
