农业科技网页_acreage-farming

以下为本文档的中文说明

acreage-farming 是一个专注于构建精准农业（precision farming）着陆页的前端技能，专为农业科技（agritech）营销网站设计。它能生成一个完整的、高视觉品质的农业科技单页网站，核心视觉元素包括暗色与亮色交替的区块布局、全屏英雄视频背景、带动画的统计数字网格、无限滚动的 Logo 走马灯以及图片背景的服务卡片，整体设计现代而专业。使用场景包括：农业科技初创公司需要快速建立品牌官网时；精准农业服务商需要展示其技术能力和数据成果时；农业设备制造商需要营销推广新产品时；农业展会和活动需要临时搭建展示页面时；投资者关系页面需要呈现农业科技投资亮点时；农业咨询公司需要展示案例研究和客户见证时；农业合作社需要展示智慧农业解决方案时。核心特点包括：一是提供了完整的参考实现（example.html），开发者可以直接复制并修改文案和数据进行快速适配，极大缩短从设计到上线的时间周期；二是采用深色与浅色交替的区块设计，营造专业高端的视觉层次感，有效引导用户的浏览视线和信息获取顺序；三是全屏视频背景和动画统计数字等现代网页元素，增强用户的沉浸感和品牌信任度，提升转化率；四是无限滚动 Logo 走马灯有效展示合作伙伴和客户群体，增强社会认同感；五是配色方案、字体、圆角、动画等视觉参数已预先锁定，确保设计一致性，无需从零开始构思视觉风格。这个技能让精准农业领域的企业能够快速获得专业级的品牌展示页面。

Acreage Farming — Precision Agriculture Landing Page

Produce 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.

Stack

• Default 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: load<script src="https://unpkg.com/framer-motion@11.11.13/dist/framer-motion.js"></script>and 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.)

Fonts

Load 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 class="serif 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. A<video autoplay muted loop playsinline>fillsinset: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 marquee

Full-width band on--bg-darker, top+bottom 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. CTA

Band 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.

Animations

• Reveal: 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 iswhileInView+viewport={{ 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 / hosts

• Inline (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 gr
  id → 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 — hard

Earthy 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/0bn6id9_{6nx3k.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/0}7k6hqoibtcn.js”,“/next/static/chunks/0b4cao.4y…j.js”,“/_next/static/chunks/02i-n28z7kjd0.js”],“default”]